鸿蒙Next flex布局开发案例详解

在鸿蒙Next开发中，使用flex布局时遇到子元素无法按预期比例分配空间的问题。比如设置了flex-grow属性但部分元素仍然堆叠在一起，而其他元素却占据了过多空间。想请教是否有具体的案例可以演示如何正确配置flex容器和子项属性（如justify-content、align-items、flex-shrink等）来实现均匀分布或自定义比例布局？最好能结合鸿蒙特有的API差异进行说明。

2 回复

鸿蒙Next的Flex布局就像排队买奶茶：

  1. justifyContent决定横着排（靠左、居中或均匀分）；
  2. alignItems控制竖着对齐（顶部、底部或拉伸）；
  3. 子组件用flexGrow抢剩余空间，像抢最后一份珍珠。
    代码示例：
.container {  
  flex-direction: row;  
  justify-content: space-between;  
}

一行代码，全员整队！🍵

更多关于鸿蒙Next flex布局开发案例详解的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next（HarmonyOS NEXT）中，Flex布局通过Flex容器组件实现，用于灵活排列子组件。以下是关键属性和开发案例：

核心属性

  • direction：主轴方向（Row/Column，默认Row）。
  • wrap：子组件换行（FlexWrap.NoWrap/Wrap/WrapReverse）。
  • justifyContent：主轴对齐方式（如FlexAlign.Start、SpaceBetween）。
  • alignItems：交叉轴对齐（如FlexAlign.Center）。

案例代码：实现水平等间距布局

import { Flex, Text, Button } from '@kit.arkui';

@Entry
@Component
struct FlexExample {
  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
      Text('左文本').fontSize(16)
      Button('中按钮').fontSize(14)
      Text('右文本').fontSize(16)
    }
    .padding(10)
    .width('100%')
  }
}

效果：三个子组件水平均匀分布，左右贴边。

案例代码：垂直居中与换行

Flex({ 
  direction: FlexDirection.Row, 
  alignItems: ItemAlign.Center, 
  wrap: FlexWrap.Wrap 
}) {
  ForEach([1,2,3,4], (item) => {
    Text(`Item${item}`)
      .width('45%')
      .height(60)
      .margin(5)
  })
}

效果：子组件垂直居中，每行显示两个，自动换行。

注意事项

  1. 子组件可通过alignSelf覆盖容器对齐方式。
  2. 使用SpaceBetween时注意留空场景的兼容性。
  3. 嵌套Flex布局可应对复杂界面，但需避免过度嵌套。

通过调整属性组合，可快速实现响应式布局，适用于列表、导航栏等场景。

回到顶部