Textfield 文件輸入框
Textfield用于文本輸入與文本編輯。
用法
文本字段允許用戶在UI中輸入文本。它們通常顯示在表單和對話框中。
概念
- 可發(fā)現(xiàn)
- 明確
- 高效
可發(fā)現(xiàn)的 Discoverable
文本字段應(yīng)突出并指示用戶可以輸入信息。
明確 Clear
文本字段狀態(tài)應(yīng)清楚地區(qū)分。
高效的
文本字段應(yīng)易于理解所請求的信息并解決任何錯誤。
類型
Textfield有兩種形式：填充和輪廓。
- Filled文本字段
- Outlined文本字段
兩種類型的文本字段都使用容器為交互提供清晰的承受能力，從而使字段在布局中可發(fā)現(xiàn)。
選擇textfield類型
兩種類型的文本字段都提供相同的功能，因此您使用的文本字段的類型可能僅取決于樣式。
- 最適合您應(yīng)用的視覺風格
- 最適合您的UI目標
- 與其他組件（如按鈕）和周圍內(nèi)容相適配
用戶界面中的效果一致性
如果在單個UI中使用了兩種類型的文本字段，則應(yīng)在不同部分中一致地使用它們，并且不要在同一區(qū)域中混合使用它們。
結(jié)構(gòu)分析
- Container 容器
- Leading icon (可選)
- Label text
- Input text
- Trailing icon (可選)
- Activation indicator (激活指示燈)
- Helper text (可選)
Container
容器通過在文本字段和周圍內(nèi)容之間建立對比來提高文本字段的可發(fā)現(xiàn)性。
Fill and stroke
文本字段容器具有填充和邊框效果。邊框的顏色和粗細可以控制何時激活文本字段。
Rounded corners
邊框容器具有圓角，填充容器具有圓角和底角。
Label text
標簽文本用于通知用戶有關(guān)文本字段需要哪些信息。每個文本字段都應(yīng)有一個標簽。
標簽文本應(yīng)與輸入行對齊，并始終可見?？梢詫⑵浞旁谖谋咀侄蔚闹虚g，也可以放在容器頂部附近。
下面是錯誤的演示：
1、標簽文字不應(yīng)被截斷。使其簡短，清晰并完全可見
2、標簽文字不應(yīng)占用多行
必填文字提示
要指示必填字段，請在標簽文本旁邊顯示一個星號（*），并在星號表示必填字段的表格旁邊注明。
如果需要某些字段，請指明所有必填字段。如果需要大多數(shù)字段，請通過在標簽文本旁邊的括號中顯示單詞“ optional”來指示可選字段。如果要求的文本是彩色的，則該顏色也應(yīng)用于星號
Input text
1.輸入文字
輸入文本是用戶輸入的文本。
2.游標
光標指示文本輸入在字段中的當前位置。
輔助要素 Assistive elements
輔助元素提供有關(guān)在文本字段中輸入的文本的更多詳細信息。
1.輔助文字
助手文本傳達了有關(guān)輸入字段的其他指導(dǎo)，例如如何使用。它應(yīng)該只占一行，始終可見或僅在焦點上可見。
2.錯誤訊息
如果不接受文本輸入，則會顯示一條錯誤消息，顯示有關(guān)如何修復(fù)它的說明。錯誤消息顯示在輸入行下方，替換輔助文本，直到修復(fù)。
3.圖標
圖標也可以用于向警報發(fā)送消息。將它們與錯誤消息配對以提供冗余警報，這在需要為色盲用戶設(shè)計時很有用。
4.字符計數(shù)器
如果有字符或單詞限制，則應(yīng)使用字符或單詞計數(shù)器。它們顯示使用的字符比例和總字符數(shù)限制。
錯誤文字
對于驗證其內(nèi)容（例如密碼）的文本字段，請在適用時用錯誤文本替換幫助程序文本。將幫助程序文本與錯誤文本交換有助于防止在布局中引入新的文本行，從而使內(nèi)容不符合要求。
如果僅可能發(fā)生一個錯誤，則錯誤文本描述如何避免該錯誤.如果可能出現(xiàn)多個錯誤，則錯誤文本描述如何避免最可能的錯誤。
如果沒有足夠的空間清楚地描述錯誤，則長錯誤可以換行。在這種情況下，請確保文本字段之間的填充足以防止多行錯誤引起布局內(nèi)
Icons
文本字段中的圖標是可選的。文本字段圖標可以描述有效的輸入方法（例如麥克風圖標），提供能力訪問其他功能（例如清除字段的內(nèi)容），并且可以表示錯誤。
前導(dǎo)和尾隨的圖標根據(jù)LTR或RTL上下文更改其位置。
1.圖標指示符
圖標指示符可以描述文本字段所需的輸入類型，并且可以作為嵌套組件的觸摸目標。例如，可以點擊日歷圖標以顯示日期選擇器。
2.有效或錯誤圖標
圖像可以指示有效輸入和無效輸入，從而使色盲用戶可以清楚地看到錯誤狀態(tài)。
3.清除圖標
清除圖標可讓用戶清除整個輸入字段。它們僅在存在輸入文本時出現(xiàn)。
4.語音輸入圖標
麥克風圖標表示用戶可以使用語音輸入字符。
5.下拉圖標
下拉箭頭指示文本字段具有嵌套的選擇組件。
Filled textfield
用法
填充的文本字段比邊框文本字段具有更多的視覺重點，因此當被其他內(nèi)容和組件包圍時，它們更加醒目。
不要將文本字段設(shè)計為類似于按鈕，因為它們可能被誤認為是按鈕。
密集文本字段（Dense text）
密集文本字段使用戶能夠掃描并對大量信息執(zhí)行操作。
沒有標簽的文本字段。
如果字段的用途由單獨的相鄰標簽指示，則文本字段不需要標簽。
前綴和后綴文本
狀態(tài)
邊框文本字段。
用法
邊框文本字段的視覺重點不如填充文本字段。當它們出現(xiàn)在窗體等位置（其中許多文本字段放在一起）時，它們強調(diào)的減少對布局的簡化有助于簡化布局。
密集文本字段。
密集文本字段使用戶能夠掃描并對大量信息執(zhí)行操作。
狀態(tài)
輸入類型
文本字段可以通過以下方式顯示用戶輸入：
- 單行文本字段僅顯示一行文本。
- 多行文本字段增長以適應(yīng)多行文本。
- 文本區(qū)域是固定高度字段
只讀文本
研究
- 帶有矩形（框）形狀的封閉文本字段比只要下劃線的字段執(zhí)行得更好。
- 文本字段框應(yīng)使用半透明填充和底線表示，或者使用完全透明的填充和不透明描邊。
- 文本字段的線條或描邊的顏色對比度與背景的最小 對比度為3:1。
- 標簽文本應(yīng)放置在文本字段框的邊界內(nèi)。
- 文本字段應(yīng)具有圓角
技術(shù)交流
QQ:3365059189
SwiftUI技術(shù)交流QQ群:518696470
- 請關(guān)注我的專欄icloudend, SwiftUI教程與源碼
http://www.itdecent.cn/c/7b3e3b671970
推薦文章
CoreData篇
- SwiftUI數(shù)據(jù)存儲之做個筆記App 新增與查詢(CoreData)
- SwiftUI進階之存儲用戶狀態(tài)實現(xiàn)登錄與登出
- SwiftUI 數(shù)據(jù)之List顯示Sqlite數(shù)據(jù)庫內(nèi)容（2020年教程）
TextField篇
- 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源碼)》
- 《SwiftUI實戰(zhàn)之TextField風格自定義與formatters》
- 《SwiftUI實戰(zhàn)之TextField如何給鍵盤增加個返回按鈕(隱藏鍵盤)》
- 《SwiftUI 當鍵盤出現(xiàn)時避免TextField被遮擋自動向上移動》
- 《SwiftUI實戰(zhàn)之TextField如何給鍵盤增加個返回按鈕(隱藏鍵盤)》
