UI开发布局-HarmonyOS应用UI开发布局

news2024/9/24 7:18:05

UI页面的构建不用再像Android开发过程中在.xml文件中书写，可直接在页面上使用声明式UI的方式按照布局进行排列，构建应用的页面。

如下代码使用Row、Column构建一个页面布局，在页面布局中添加组件Text、Button，共同构成页面：


import router from '@ohos.router'
import hilog from '@ohos.hilog'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        // 添加按钮，以响应用户点击
        Button('Next')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .type(ButtonType.Capsule)
          .margin({
            top: 20
          })
          .width('40%')
          .height('5%')

          // 设置点击事件，进行跳转
          .onClick(() => {
              // 跳转到第二页
              router.pushUrl({ url: 'pages/SecondPage' }).then(() => {
            }).catch((err) => {
                hilog.error(0x0000, "index", 'Failed to jump to the second page')
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

在实际开发的过程中，按照如下流程进行页面的布局：

确定页面的布局结构
分析页面中的元素组成
选用合适的布局容器组件或属性控制页面中各个元素的位置和大小进行约束

1.布局结构

布局的结构是分层级的，代表了用户界面中的整体架构。

如图所示：

2.布局元素的组成

布局相关的容器组件形成对应的布局效果，布局元素组成图：

可针对布局元素进行相应的设置，实现自定义的效果。

组件区域（蓝区方块）：组件区域表明组件的大小，width、height属性设置该区域的大小。
组件内容区（黄色方块）：组件区域大小减去组件的border值，组件内容区大小会作为组件内容（或者子组件）进行大小测算时的布局测算限制。
组件内容（绿色方块）：组件内容本身占用的大小，比如文本内容占用的大小。组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小，可能出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不一致时，align属性生效，定义组件内容在组件内容区的对齐方式，如居中对齐。
组件布局边界（虚线部分）：组件通过margin属性设置外边距时，组件布局边界就是组件区域加上margin的大小。