100%要遭遇的鸿蒙ArkUI要命bug？3步原地回血，真的香！

如果你还没遇到过此致命bug，那么恭喜，真羡慕你现在知道了…

如果你对ArkUI不了解，可以看下背景介绍视频：《方舟框架ArkUI—实战类星巴克APP》

实践过的小伙伴们会惊奇的发现，ArkUI的eTS组件，居然没有 【输入框】！

一个很常规的登录页面，其中的用户名和密码，怎么输入？？？

王德发？？？

我是万万没想到啊，华为你竟然！！竟然发的这么早， 大伙不是提前体验了eTS相比较Java、JavaScript的精炼之处了？这波不亏，小老板，基地爆炸，问题不大。（华为打钱）

别看我表明冷静，实际上慌得雅痞，经过我一番折腾和内部消息打听，终于表面上也慌得雅痞，现在真的没有，那我的这课程还真做下去。。。你问是什么课？？

ArkUI双范式超级实战-鸿蒙社区App

好了，不卖关子了，这玩意用不了，逼我出大招，有点意思。

我想了想，一个输入框（input），从设计交互的角度，无非是：

1. 有一个圆角矩形方框，或者密码不可见的星星（*）等格式。
2. 未输入时的文字提示。（比如：提示用户此处输入账号、密码等）
3. 让光标在其中闪烁，提醒用户可以输入。
4. 用户点击后，打开输入法，用户点其他UI元素后，关闭输入法。
5. 输入或删除任何内容，其他UI元素可以感知（比如可以提升用户输入长度、格式有效性检查等）

总结成组件的专业术语如下：

1. 几种输入框常见专用样式包装复用。
2. 占位符（Placeholder）。
3. 可获得用户焦点（Focusable）。
4. 打开和关闭输入法编辑器（IME，Input Method Editor）
5. 录入内容变量的监视器（Variable Observer）。

为此我挣扎了一段时间，遍寻官方ArkUI文档，问烦了eTS组的小哥，3、4两个步骤无法实现，我汗！
其实4是有现成的接口，但是因为3目前不能实现，所以4也就没了卵用。我猜可能是框架开发中，聚焦（Focus）部分可能遇到了比较大的bug，因此导致相关组件都难产了。

那么步骤剩下3个：

1. 几种输入框常见专用样式包装复用。
2. 占位符（Placeholder）。
   3. 可获得用户焦点（Focusable）。
   4. 打开和关闭输入法编辑器（IME，Input Method Editor）
3. 录入内容变量的监视器（Variable Observer）。

用什么组件要做基底呢？ 没错，可能你已经想到了，Text！
普通的Text不给用户互动，加上这些就完事了！

还记得ArkUI的eTS中，显示数据最重要的是什么吗？状态变量（State Variable），没听过？？？
课里见：

ArkUI双范式超级实战-鸿蒙社区App

其实官方文档中没这么说，是我发明【状态变量】这个词的，踩坑多你信我：

@State   user: string = ''
@State   code: string = ''

用user和code来表示用户名和密码的数据，都是文本（string）。
再加一个“登录”按钮是否可以点击的状态变量，来与用户名和密码的具体值，做一个动态判断：

 @State canLogin :boolean = false

默认是不可点的（布尔值boolean为false假），因为页面默认用户没有输入，自然是不可以登录的。

有了数据，那么输入框的UI就来了：

Text(this.user == '' ? '账号/Email/手机号' : this.user)
Text(this.code == '' ? '密码' : this.code)

三步回血大法的第一步终于可以开始了，样式复用。两个输入框其实样式基本上差不多，如何复用？可以用ArkUI提供的一个超级修饰词，@Extend。可以对任意组件进行扩展一个函数，这样可以在使用它的时候，重复使用。要注意的是，要写在组件@Component定义的外面才能生效，比如在import语句的下方，是个安全的位置：

import prompt from '@system.prompt';

@Extend(Text) function input(){
  .fontSize($r("sys.float.id_text_size_sub_title1"))
  .fontColor($r("sys.color.id_color_text_primary"))
  .width('100%')
  .padding(20)
  .textAlign(TextAlign.Start)
}

这样一个还算过的去输入样式就可以重复使用了，来到第二步，加上输入框的占位符：

Text(this.user == '' ? '账号/Email/手机号' : this.user)
        .input()

Text(this.code == '' ? '密码' : this.code)
        .input()

效果如下：

最后一步，做一个录入内容变量的监视器，监视器说的很抽象，但代码写起来其实就是一个函数，eTS中实现这一点，又来了一个大虾，@Watch，可以对任何状态变量进行“监视”，只要变量发生了任何变化，就可以触发一个你指定的函数来进行处理。俗称，回调函数（Callback function）。

@State @Watch('onChange')  user: string = ''
@State @Watch('onChange')  code: string = ''

onChange(){
    if (this.user.length >= 3 && this.code.length >= 3) {
      this.canLogin = true
    } else {
      this.canLogin = false
    }
  }

onChange就是回调函数，这里就是一个普通的输入有效性检查，用户名和密码输入超过3位，就视为有效可以登录，否则不能登录。
那么登录按钮也要做相应的绑定：

Button("登录")
        .enabled(this.canLogin)
        .backgroundColor(
            this.canLogin ?
          $r("app.color.theme") :
          $r("app.color.disabled"))

这里加上按钮的背景色，也与是否登录有关。效果如下：

好了，到了最终一步，既然用户没法录入，那就模拟几个输入的最终状态：非法输入、合法输入、清空输入；
It’s easy

      Row(){
        Button('合法输入')
          .padding(10)
          .onClick(()=>{
            this.user = 'user1'
            this.code = 'pass1'
          })

        Button('非法输入')
          .backgroundColor(Color.Red)
          .padding(10)
          .onClick(()=>{
            this.user = 'ab'
            this.code = '11'
          })

        Button('清空')
          .backgroundColor(Color.Red)
          .padding(10)
          .onClick(()=>{
            this.user = ''
            this.code = ''
          })
      }

最终3种状态的测试效果如下（分别点击3个按钮），再见！

哎哎哎，别急着跑

ArkUI、DevEco Studio IDE版本发布的小姐姐亲口跟我说，12月30日发布的新版本会有输入框Input组件。

课里见！

ArkUI双范式超级实战-鸿蒙社区App