iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0
Mobile Development

從零開始學習 Jetpack Compose系列 第 6

從零開始學習 Jetpack Compose Day5 - TextField

  • 分享至 

  • xImage
  •  

TextEdit

負責讓使用者輸入,繼承於BasicTextField,跟Text一樣是有使用Material 的主題,如果不要的話就是使用BasicTextField但會缺少一些東西,如hint要自行處理。

基本功能

value預設文字

label標題

prefix前綴詞(另外還有suffix後綴詞可以使用)

leadingIcon輸入框前放IcontrailingIcon輸入框後放Icon

placeholder佔位符跟EditText的hint一樣,但如果有使用label預設情況下並不會顯示,要使用者點擊輸入框後才會顯示。
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day5/%E6%88%AA%E5%9C%96%202024-09-20%20%E6%99%9A%E4%B8%8A10.49.12.png

KeyboardOptions

設定鍵盤顯示類型
KeyboardType.Password
KeyboardType.Number
KeyboardType.Phone

VisualTransformation

調整顯示類型,最常使用在密碼,透過PasswordVisualTransformation來處理。
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day5/%E6%88%AA%E5%9C%96%202024-09-20%20%E6%99%9A%E4%B8%8A10.49.52.png

OnValueChange

監聽輸入類似TextWatchListener,可以用在把輸入值自動轉大寫或者檢查是否有特殊符號。

自動轉大寫
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day5/%E6%88%AA%E5%9C%96%202024-09-20%20%E6%99%9A%E4%B8%8A10.50.38.png

檢查是否有特殊符號
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day5/%E6%88%AA%E5%9C%96%202024-09-20%20%E6%99%9A%E4%B8%8A10.50.58.png

OutlinedTextField

Material Design 的另一個TextEdit樣式
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day5/%E6%88%AA%E5%9C%96%202024-09-20%20%E6%99%9A%E4%B8%8A10.51.17.png


上一篇
從零開始學習 Jetpack Compose Day4 - Text
下一篇
從零開始學習 Jetpack Compose Day6 - Button
系列文
從零開始學習 Jetpack Compose30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言