100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!

发布于 2021-12-6 16:31
浏览
4收藏

如果你还没遇到过此致命bug,那么恭喜,真羡慕你现在知道了…
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区


100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区
如果你对ArkUI不了解,可以看下背景介绍视频:《方舟框架ArkUI—实战类星巴克APP》


实践过的小伙伴们会惊奇的发现,ArkUI的eTS组件,居然没有 【输入框】!
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

一个很常规的登录页面,其中的用户名和密码,怎么输入???
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

王德发???
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

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

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


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

好了,不卖关子了,这玩意用不了,逼我出大招,有点意思。
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

我想了想,一个输入框(input),从设计交互的角度,无非是:

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

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

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

100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

为此我挣扎了一段时间,遍寻官方ArkUI文档,问烦了eTS组的小哥,3、4两个步骤无法实现,我汗!
其实4是有现成的接口,但是因为3目前不能实现,所以4也就没了卵用。我猜可能是框架开发中,聚焦(Focus)部分可能遇到了比较大的bug,因此导致相关组件都难产了。
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

那么步骤剩下3个:

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

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

还记得ArkUI的eTS中,显示数据最重要的是什么吗?状态变量(State Variable),没听过???
课里见:


100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区
ArkUI双范式超级实战-鸿蒙社区App


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

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

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

 @State canLogin :boolean = false

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

100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区


有了数据,那么输入框的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()

效果如下:
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

最后一步,做一个录入内容变量的监视器,监视器说的很抽象,但代码写起来其实就是一个函数,eTS中实现这一点,又来了一个大虾,@Watch,可以对任何状态变量进行“监视”,只要变量发生了任何变化,就可以触发一个你指定的函数来进行处理。俗称,回调函数(Callback function)。
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

@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"))

这里加上按钮的背景色,也与是否登录有关。效果如下:
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

好了,到了最终一步,既然用户没法录入,那就模拟几个输入的最终状态:非法输入、合法输入、清空输入;
It’s easy
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

      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个按钮),再见!
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

哎哎哎,别急着跑
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

ArkUI、DevEco Studio IDE版本发布的小姐姐亲口跟我说,12月30日发布的新版本会有输入框Input组件。
100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区

课里见!


100%要遭遇的鸿蒙ArkUI要命bug?3步原地回血,真的香!-开源基础软件社区
ArkUI双范式超级实战-鸿蒙社区App


已于2021-12-6 16:31:09修改
8
收藏 4
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐