HarmonyOS开发实战知识： UI开发技巧规范

最新推荐文章于 2024-07-16 17:40:02 发布

代码中的爱码士

最新推荐文章于 2024-07-16 17:40:02 发布

阅读量1k

点赞数 18

分类专栏： HarmonyOS 鸿蒙鸿蒙学习文章标签： harmonyos 华为鸿蒙学习 android ui 鸿蒙开发

本文链接：https://blog.csdn.net/maniu110/article/details/140323599

版权

HarmonyOS 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

鸿蒙

46 篇文章 0 订阅

订阅专栏

鸿蒙学习

46 篇文章 0 订阅

订阅专栏

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。这里有几个地方需要注意：

两个List的嵌套

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

List嵌套都要用LazyForEach

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

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

索引列表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)
    })

实现粘性标题效果

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

List()
  .sticky(StickyStyle.Header)

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

5、底部弹框实现

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

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

animateTo
translate

具体做法如下：

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

@State translateY: string = "100%";

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

然后重写aboutToAppear方法

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

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

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

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

6、Navigation内部布局的坑

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

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

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

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？但是又不知道从哪里下手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~~

一、鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程