TextInput、TextArea是輸入框組件蚕冬，通常用于響應(yīng)用戶的輸入操作，比如評論區(qū)的輸入是辕、聊天框的輸入囤热、表格的輸入等，也可以結(jié)合其它組件構(gòu)建功能頁面获三，例如登錄注冊頁面旁蔼。具體用法請參考TextInput、TextArea疙教。
創(chuàng)建輸入框
TextInput為單行輸入框棺聊、TextArea為多行輸入框。通過以下接口來創(chuàng)建贞谓。
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
- 單行輸入框
TextInput()
- 多行輸入框
TextArea()
多行輸入框文字超出一行時(shí)會(huì)自動(dòng)折行限佩。
@State textval: string = '文本域輸入框文本域輸入框文本域輸入框文本域輸入框'
// ...
TextArea({text: this.textval}).width(200)
設(shè)置輸入框類型
TextInput有9種可選類型，分別為Normal基本輸入模式裸弦、Password密碼輸入模式祟同、Email郵箱地址輸入模式、Number純數(shù)字輸入模式理疙、PhoneNumber電話號碼輸入模式晕城、USER_NAME用戶名輸入模式、NEW_PASSWORD新密碼輸入模式窖贤、NUMBER_PASSWORD純數(shù)字密碼輸入模式砖顷、NUMBER_DECIMAL帶小數(shù)點(diǎn)的數(shù)字輸入模式贰锁。通過type屬性進(jìn)行設(shè)置：
- 基本輸入模式（默認(rèn)類型）
TextInput().type(InputType.Normal)
- 密碼輸入模式
TextInput().type(InputType.Password)
- 手機(jī)號模式
TextInput().type(InputType.PhoneNumber)
自定義樣式
- 設(shè)置無輸入時(shí)的提示文本。
TextInput({ placeholder: '請輸入' })
- 設(shè)置輸入框當(dāng)前的文本內(nèi)容滤蝠。
TextInput({ placeholder: '請輸入', text: '默認(rèn)值' })
- 添加backgroundColor改變輸入框的背景顏色豌熄。
TextInput().backgroundColor(Color.Pink)
添加事件
文本框主要用于獲取用戶輸入的信息，把信息處理成數(shù)據(jù)進(jìn)行上傳几睛，綁定onChange事件可以獲取輸入框內(nèi)改變的內(nèi)容房轿。用戶也可以使用通用事件來進(jìn)行相應(yīng)的交互操作。
TextInput().onChange((val: string)=>{
console.log('輸入的值:', val)
}).onFocus(()=>{
console.log('獲取焦點(diǎn):')
})
鍵盤避讓
鍵盤抬起后所森，具有滾動(dòng)能力的容器組件在橫豎屏切換時(shí)囱持，才會(huì)生效鍵盤避讓，若希望無滾動(dòng)能力的容器組件也生效鍵盤避讓焕济，建議在組件外嵌套一層具有滾動(dòng)能力的容器組件纷妆，比如Scroll、List晴弃、Grid掩幢。
Scroll() {
Column(){
TextInput()
TextInput()
TextInput()
TextInput()
}
}
