鸿蒙开发5.0【UI开发技巧】

1、TextInput 输入框获取焦点（弹起键盘）

让TextInput再次获取焦点，并弹出键盘，可调用下面方法，参数为TextInput的id/key

focusControl.requestFocus("_TextInput") 

注意：这个方法虽然可以让TextInput获取到焦点，但经测试，不一定能保证键盘弹出。如果我们手动调用过隐藏键盘的方法，那么下次即使调用获取焦点，键盘也不会弹出。

为保险起见，这里需要再手动调用一下展示键盘的方法，确保键盘弹起。

手动调用弹起/收起键盘，callback也会返回有失败的情况： {“code”:12800009,“message”:“input method not attached.”}

如上面所说，经测试，和我们手动调用和系统自动收起有关，手动调用的时候注意一下。

2、弹出对话框

CustomDialogController

构建一个CustomDialogController即可：

  private dialogController: CustomDialogController = new CustomDialogController({
    builder: Dialog(), // 自定义布局视图
    alignment: DialogAlignment.Center, // 显示位置
    customStyle: true
  })
  
  dialogController.open() //打开对话框

显示对话框，调用CustomDialogController的open()方法

Dialog内部视图

和普通创建视图组件无异，就是多了一个装饰器：@CustomDialog

@Component
@CustomDialog
export default struct CustomDialog {
  controller: CustomDialogController
  ...
  
  // 内部关闭对话框：
  this.controller.close()
}

内部需要关闭对话框，调用CustomDialogController的close()方法即可

3、RelativeContainer 如何实现宽/高自适应

如图所示，想实现视图中上半部分的布局样式。很显然，用RelativeContainer这个布局控件很合适。

然后，让第一个组件顶部与RelativeContainer的顶部对齐，下面密码视图与RelativeContainer的底部对齐。

对于开发过android的相对布局，按我们理解的来说，RelativeContainer的高度，此时就应该按最后贴齐方式，计算其内部组件的高度为RelativeContainer的高度。但实际效果却是如下图所示：

直接按类似高度 100% 实现了。

如何让RelativeContainer能够自适应其高度

这里就需要将宽/高设置为auto，同时，还要注意锚点的设置，不能有同方向的与__container__的锚定设置：

• 宽度自适应：水平方向不能有类似：left: { anchor: '__container__', align: HorizontalAlign.Start }
• 高度自适应：垂直方向不能有类似：top: { anchor: '__container__', align: VerticalAlign.Top }
• 宽/高度必须设置为auto

所以，最后布局的代码改写这样，就可以实现高度自适应了

    RelativeContainer() {
        Text("更多登录方式")
          ...
          .alignRules({
            // top: { anchor: '__container__', align: VerticalAlign.Top }, // 不能有垂直方向上的与RelativeContainer的锚定
            left: { anchor: '__container__', align: HorizontalAlign.Start },
          })
          .id("title")
        Column() {
            ...
        }
        .alignRules({
          top: { anchor: 'title', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          // bottom: {anchor: '__container__', align: VerticalAlign.Bottom} // 不能有垂直方向上的与RelativeContainer的锚定
        })
        .id("pwd")
      }
      .height('auto')  // 高度一定要设置为auto，不可以不写！

4、List与AlphabetIndexer组合，实现索引联动效果

这个场景最经典的用法就是国家区号与索引值互相联动，如下图所示

这个视图效果由两个空间组合完成，List与AlphabetIndexer。这里有几个地方需要注意：

1. 两个List的嵌套

在左边列表视图中，索引和索引内的内容，是一个整体的List，而索引内容又是一个List。所以这里是两个List嵌套完成的布局样式。所以，要用到ListItemGroup和ListItem：

2. List嵌套都要用LazyForEach

之前论坛里面有人用普通的forEach代替，但出现了内容错乱的问题。所以，这样都用LazyForEach就不会有这个问题。配合ListItemGroup和ListItem的写法如下：

List() {
    LazyForEach ...
        ListItemGroup ...
            LazyForEach ...
                ListItem() 
        }   
    }
}

3. 索引列表AlphabetIndexer的实现

直接用官方的API就可以，注意的是：

• 构造方法入参的index，传入全局索引变量，并且增加上状态装饰符如@state，以实现联动效果。List的滚动也要对应实现onScollIndex的监听，变更全局索引变量。

@State currentIndex: number = 0
List({ scroller: this.listScroller }) {
    ...
    .onScrollIndex((startIndex: number) => {
        this.currentIndex = startIndex
    })

• 实现onSelected的时候，需要将index设置给List的listScroller的scrollToIndex方法，这样当选择右侧索引的时候，就可以让列表也滚动到对应的位置。这个位置对应的就是第一层ListItemGroup的位置。

AlphabetIndexer({ arrayValue: this.dataSource, selected: this.currentIndex })
    .color(Color.Gray)
    .selectedColor(0xFFFFFF)// 选中项文本颜色
    .selectedBackgroundColor(Color.Blue)// 选中项背景颜色
    .selectedFont({ size: 11, weight: FontWeight.Normal })// 选中项字体样式
    .itemSize(32)
    .width(32)
    .usingPopup(false)// 是否显示弹出框
    .onSelect((index: number) => {
        this.listScroller.scrollToIndex(index)
    })

4. 实现粘性标题效果

这一步就很简单了，一句api搞定

List()
  .sticky(StickyStyle.Header)

这样就实现了实现左右联动效果，还配合上了粘性标题。

5、底部弹框实现

上面介绍过如何构建并使用 CustomDialog，虽然可以设置dialog显示的位置，比如设置让其在底部展示，但并不能实现从底部滑出那种显示效果。比如上面这个选择手机的国家地区时，希望是从底部弹出的效果：

如果要实现，就得使用普通的view配合动画来实现，主要用到下面这两个关键方法：

• animateTo
• translate

具体做法如下：

1. 先为视图设置垂直方向上的translateY

@State translateY: string = "100%";

build(）{
  Column()
    ...
    .translate({y: this.translateY})
}

2. 然后重写aboutToAppear方法

aboutToAppear(): void {
    animateTo({
        duration: 200, curve: Curve.EaseInOut, onFinish: () => {

        }
    }, () => {
    this.translateY = "0%"
    this.backgroundOpacity = 0.3 // 可以多增加一个背景变深的效果
    })
}

3. 当关闭的时候，统一调用关闭函数处理

close() {
    animateTo({
        duration: 200, curve: Curve.EaseInOut, onFinish: () => {
        }
    }, () => {
        this.translateY = "100%"
        this.backgroundOpacity = 0
    })
}    

6、Navigation内部布局的坑

如果你想将Navigation作为第一个视图显示，也不是不可以，但要注意这个坑：

从视图可以看出，本来黄色部分应紧贴在底部，但却出现了空出一块：

![8

如果想最后黄色贴底，就需要设置.hideTitleBar(true)

​
最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

​​​​

高清完整版请点击→《鸿蒙NEXT星河版开发学习文档》

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细资料鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，帮助大家在技术的道路上更进一步。

《鸿蒙 (OpenHarmony)开发学习视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

《鸿蒙开发基础》

《鸿蒙开发进阶》

《鸿蒙开发实战》

获取这份鸿蒙星河版学习资料，请点击→《鸿蒙NEXT星河版开发学习文档》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！