【HarmonyOS 5】鴻蒙中常見的標題欄布局方案

##鴻蒙開發(fā)能力 ##HarmonyOS SDK應(yīng)用服務(wù)##鴻蒙金融類應(yīng)用 （金融理財#

一、問題背景：

鴻蒙中常見的標題欄：矩形區(qū)域，左邊是返回按鈕，右邊是問號幫助按鈕，中間是標題文字。

那有幾種布局方式，分別怎么布局呢？常見的思維是，有老鐵使用row去布局，怎么都對不齊。

二、解決方案

方案一，使用Flex布局：
使用Flex布局將返回按鈕、標題文字和幫助按鈕水平排列，通過justifyContent: FlexAlign.SpaceBetween使三個組件在水平方向上均勻分布，alignItems: ItemAlign.Center使組件在垂直方向上居中對齊。

@Entry
@Component
struct 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屬性分別設(shè)置返回按鈕和幫助按鈕的位置，標題文字通過alignContent: Alignment.Center使其在布局中居中顯示。

@Entry
@Component
struct 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')
  }
}

審核編輯 黃宇