本項目Gitee倉地址：深入淺出eTs學(xué)習(xí): 帶大家深入淺出學(xué)習(xí)eTs (gitee.com)

一、基本界面

本項目基于#深入淺出學(xué)習(xí)eTs#（四）登陸界面UI，繼續(xù)進(jìn)行，實現(xiàn)一個判斷的功能

二、控件介紹

TextInput

可以輸入單行文本并支持響應(yīng)輸入事件的組件。

interface TextInputInterface {
  (value?: TextInputOptions): TextInputAttribute;
}

declare interface TextInputOptions {
  placeholder?: ResourceStr;
  text?: ResourceStr;
  controller?: TextInputController;
}

定義如上，其中placeholder代表默認(rèn)顯示的內(nèi)容，lesson4中該部分程序如下：

          TextInput({ placeholder: "我的QQ帳號" })
            .width("270vp")
            .height("50vp")
            .flexShrink(0)
          TextInput({ placeholder: "**********" })
            .width("270vp")
            .height("50vp")
            .flexShrink(0)
            .type(InputType.Password)

其定義也是先對控件類型進(jìn)行聲明，然后對基本屬性進(jìn)行設(shè)置

事件

其中重要的是這個內(nèi)容，當(dāng)內(nèi)容發(fā)生改變時，需要對變量進(jìn)行重新幅值

三、按鍵綁定

在確認(rèn)需求后，我們要做的就是對兩個輸入框的內(nèi)容進(jìn)行判斷，首先設(shè)置一個點擊函數(shù)

        Button("登    錄")
          .width("250vp")
          .height("60vp")
          .fontSize("31fp")
          .onClick(() => {
            
          })

然后將兩個輸入框的內(nèi)容進(jìn)行變量綁定

  @State QQ: string = '110xxxx'
  @State Password: string = '123456'
          TextInput({ placeholder: this.QQ })
            .width("270vp")
            .height("50vp")
            .flexShrink(0)
            .onChange((value: string) => {
              this.QQ = value
            })
             TextInput({ placeholder: this.Password })
            .width("270vp")
            .height("50vp")
            .flexShrink(0)
            .type(InputType.Password)

當(dāng)按鍵按下后對輸入框內(nèi)容進(jìn)行判斷

            if(this.QQ == "11066")
            {
              this.Password = '登錄成功'
            }else
            {
              this.Password = '登錄失敗'
            }

我們這里進(jìn)行一個簡單的判斷（似乎模擬器有BUG，不能進(jìn)行輸入，下個章節(jié)我看下怎么解決這個問題，這次采用直接賦值this.QQ的方式完成判斷）

四、整體測試

當(dāng)輸入內(nèi)容為110xxxx時，點擊登錄，在密碼框提示登錄失敗

當(dāng)輸入框為11066時，點擊輸入框，此時得到的反饋為登錄成功

編輯：黃飛