鴻蒙HarmonyOS實戰-ArkUI元件（TextInput/TextArea）

蜀道山QAQ發表於2024-04-07
鴻蒙UI元件

🚀一、TextInput/TextArea

TextInput和TextArea元件通常用於收集使用者輸入的文字資料。

TextInput元件通常用於單行文字的輸入，它允許使用者透過一個游標來輸入文字，並支援多種樣式和佈局選項來提高使用者體驗。例如，在使用者輸入錯誤時可以顯示錯誤訊息或在使用者輸入時自動完成文字。

TextArea元件與TextInput類似，但允許使用者輸入多行文字，它通常具有更大的輸入框和捲軸來瀏覽輸入的文字。Textarea元件也支援多種樣式和佈局選項，例如自動調整輸入區域的大小以適應輸入的文字，以及支援大於輸入區域的文字滾動。

無論是TextInput還是TextArea，它們都使用onChange事件來檢測文字輸入的變化，並將輸入的文字作為屬性傳遞到父元件或應用程式。這些元件也可以在需要時收集其他的表單資料，例如表單提交時需要傳送的資料。

🔎1.建立輸入框

語法說明：

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

使用：

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)
    }.width('100%')
  }
}

image

🔎2.設定輸入框型別

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      TextInput()
        .type(InputType.Normal)
      TextInput()
        .type(InputType.Password)
    }.width('100%')
  }
}

image

🔎3.自定義樣式

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      TextInput({placeholder:'我是提示文字'})
      TextInput({placeholder:'我是提示文字',text:'我是當前文字內容'})
      TextInput({placeholder:'我是提示文字',text:'我是當前文字內容'})
        .backgroundColor(Color.Pink)
    }.width('100%')
  }
}

image

🔎4.新增事件

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      TextInput()
        .onChange((value: string) => {
          console.info(value);
        })
        .onFocus(() => {
          console.info('獲取焦點');
        })
    }.width('100%')
  }
}

image

🔎5.案例

登入介面是一種用於認證使用者身份的介面。當使用者訪問需要身份驗證的網站、應用程式或系統時，他們通常需要輸入其使用者名稱和密碼來登入。登入介面通常包括一個輸入框，以便使用者輸入其使用者名稱或電子郵件地址，以及一個密碼輸入框，用於輸入其密碼。有些登入介面甚至還可包括驗證碼輸入框或其他安全資訊，以提高安全性。

登入介面是Web和移動應用程式中常見的介面元素，因為它們允許應用程式和網站保護其使用者的個人資訊和資料。登入介面通常需要正確的使用者名稱和密碼才能訪問應用程式或網站。登入後，應用程式或網站將與該使用者關聯，並在以後的訪問中保持登入狀態，使使用者能夠輕鬆地訪問其個人資訊和資料。

@Entry
@Component
struct TextInputSample {
  build() {
    Column() {
      TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
        .onSubmit((EnterKeyType)=>{
          console.info(EnterKeyType+'輸入法Enter鍵的型別值')
        })
      TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
        .onSubmit((EnterKeyType)=>{
          console.info(EnterKeyType+'輸入法Enter鍵的型別值')
        })
      Button('Sign in').width(150).margin({ top: 20 })
    }.padding(20)
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章