【HarmonyOS 5】鴻蒙中常見(jiàn)的標(biāo)題欄布局方案

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

一、問(wèn)題背景：

鴻蒙中常見(jiàn)的標(biāo)題欄：矩形區(qū)域，左邊是返回按鈕，右邊是問(wèn)號(hào)幫助按鈕，中間是標(biāo)題文字。

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

二、解決方案

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

@Entry
@Component
struct TitleBarFlex {
  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      // 左邊返回按鈕
      Button('←')
        .onClick(() = > {
          console.log('返回按鈕被點(diǎn)擊')
        })

      // 中間標(biāo)題文字
      Text('標(biāo)題文字')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      // 右邊問(wèn)號(hào)幫助按鈕
      Button('?')
        .onClick(() = > {
          console.log('幫助按鈕被點(diǎn)擊')
        })
    }
    .width('100%')
    .height(50)
    .padding({ left: 10, right: 10 })
    .backgroundColor('#F0F0F0')
  }
}

方案二，使用Stack布局：
使用Stack布局將三個(gè)組件堆疊在一起，通過(guò)position屬性分別設(shè)置返回按鈕和幫助按鈕的位置，標(biāo)題文字通過(guò)alignContent: Alignment.Center使其在布局中居中顯示。

@Entry
@Component
struct Index {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 中間標(biāo)題文字
      Text('標(biāo)題文字')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      // 左邊返回按鈕
      Button('←')
        .position({ x: 10, y: 5 })
        .onClick(() = > {
          console.log('返回按鈕被點(diǎn)擊')
        })

      // 右邊問(wèn)號(hào)幫助按鈕
      Button('?')
        .position({ x: "88%", y: 5 })
        .onClick(() = > {
          console.log('幫助按鈕被點(diǎn)擊')
        })
    }
    .width('100%')
    .height(50)
    .backgroundColor('#F0F0F0')
  }
}

審核編輯 黃宇