OpenHarmony/HarmonyOS中Stack，Flex布局的使用


作者：坚果


本示例为构建了简单页面展示食物坚果的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。

适用

语言：ArkTS

版本：API9

OpenHarmony：3.2Release

HarmonyOS：3.1

运行效果

OpenHarmony/HarmonyOS中Stack，Flex布局的使用_Stack

完整代码

@Component
struct NustImageDisplay {
  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
      Image($r('app.media.nust'))
        .objectFit(ImageFit.Cover)
      Text('大坚果')
        .fontSize(26)
        .fontWeight(500)
        .margin({ left: 26, bottom: 17.4 })
    }
    .backgroundColor('#FFedf2f5')
    .height(357)
  }
}

@Component
struct ContentTable {
  @Builder IngredientItem(title:string, name?: string, value?: string) {
    Flex() {
      Text(title)
        .fontSize(17.4)
        .fontWeight(FontWeight.Bold)
        .layoutWeight(1)
      Flex({ alignItems: ItemAlign.Center }) {
        Text(name)
          .fontSize(17.4)
          .flexGrow(1)
        Text(value)
          .fontSize(17.4)
      }
      .layoutWeight(2)
    }
  }

  build() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
      this.IngredientItem('卡路里', '17kcal',"卡路里")
      this.IngredientItem('营养', '蛋白质', '0.9g')
      this.IngredientItem(' ', '油脂', '0.2g')
      this.IngredientItem(' ', '碳水化合物', '3.9g')
      this.IngredientItem(' ', '维生素C', '17.8mg')
    }
    .padding({ top: 20, right: 20, left: 20 })
    .height(250)
  }
}

@Entry
@Component
struct FoodDetail {
  build() {
    Column() {
      NustImageDisplay()
      ContentTable()
    }
    .alignItems(HorizontalAlign.Center)
  }
}

接下来就来带大家拆解一下。用到的几个组件。

Flex

以弹性方式布局子组件的容器组件。

Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。

Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

标准Flex布局容器。

  • direction：子组件在Flex容器上排列的方向，即主轴的方向。
  • wrap：Flex容器是单行/列还是多行/列排列。 说明： 在多行布局时，通过交叉轴方向，确认新行堆叠方向。
  • justifyContent：所有子组件在Flex容器主轴上的对齐格式。
  • alignItems：所有子组件在Flex容器交叉轴上的对齐格式。
  • alignContent：交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

Stack

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

Stack(value?: { alignContent?: Alignment })

  • alignContent：设置子组件在容器内的对齐方式。 默认值：Alignment.Center

Column

横向布局元素间距

Space：纵向布局元素垂直方向间距。

  • alignItems：设置子组件在水平方向上的对齐格式。默认值：HorizontalAlign.Center
  • justifyContent：设置子组件在垂直方向上的对齐格式。

Row

沿水平方向布局容器。

Space：沿垂直方向布局的容器。

  • alignItems：设置子组件在垂直方向上的对齐格式。 默认值：VerticalAlign.Center
  • justifyContent：设置子组件在水平方向上的对齐格式。 FlexAlign.Start

以上就是用到的几个组件和介绍。大家可以自己复制代码到本地，然后打开预览器，或者真机测试。