【HarmonyOS 5】鸿蒙中常见的标题栏布局方案

作者：GeorgeGcs

2025-05-08
上海
本文字数：912 字
阅读完需：约 3 分钟

【HarmonyOS 5】鸿蒙中常见的标题栏布局方案

一、问题背景：

鸿蒙中常见的标题栏：矩形区域，左边是返回按钮，右边是问号帮助按钮，中间是标题文字。

那有几种布局方式，分别怎么布局呢？常见的思维是，有老铁使用 row 去布局，怎么都对不齐。

二、解决方案

方案一，使用 Flex 布局：使用 Flex 布局将返回按钮、标题文字和帮助按钮水平排列，通过 justifyContent: FlexAlign.SpaceBetween 使三个组件在水平方向上均匀分布，alignItems: ItemAlign.Center 使组件在垂直方向上居中对齐。

@Entry@Componentstruct TitleBarFlex {  build() {    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {      // 左边返回按钮      Button('←')        .onClick(() => {          console.log('返回按钮被点击')        })
      // 中间标题文字      Text('标题文字')        .fontSize(20)        .fontWeight(FontWeight.Bold)
      // 右边问号帮助按钮      Button('?')        .onClick(() => {          console.log('帮助按钮被点击')        })    }    .width('100%')    .height(50)    .padding({ left: 10, right: 10 })    .backgroundColor('#F0F0F0')  }}

复制代码

方案二，使用 Stack 布局：使用 Stack 布局将三个组件堆叠在一起，通过 position 属性分别设置返回按钮和帮助按钮的位置，标题文字通过 alignContent: Alignment.Center 使其在布局中居中显示。

@Entry@Componentstruct Index {  build() {    Stack({ alignContent: Alignment.Center }) {      // 中间标题文字      Text('标题文字')        .fontSize(20)        .fontWeight(FontWeight.Bold)
      // 左边返回按钮      Button('←')        .position({ x: 10, y: 5 })        .onClick(() => {          console.log('返回按钮被点击')        })
      // 右边问号帮助按钮      Button('?')        .position({ x: "88%", y: 5 })        .onClick(() => {          console.log('帮助按钮被点击')        })    }    .width('100%')    .height(50)    .backgroundColor('#F0F0F0')  }}