鸿蒙 Flex 容器组件全解析：响应式布局与多端适配权威指南 原创

// 基础Flex容器结构
Flex({ 
  direction: FlexDirection.Row,  // 主轴方向
  wrap: FlexWrap.Wrap,            // 换行策略
  justifyContent: FlexAlign.Center // 主轴对齐
}) {
  // 子组件声明区域
}

    Flex({ direction: FlexDirection.Row }) {
      Text('首页')
        .width('25%')
        .height(44)
      Text('分类')
        .width('25%')
        .height(44)
      Text('购物车')
        .width('25%')
        .height(44)
      Text('我的')
        .width('25%')
        .height(44)
    }

Flex({ direction: FlexDirection.Column, space: { main: LengthMetrics.px(16) } }) {
      Image($r('app.media.banner'))
        .width('100%')
        .height(200)
      Text('推荐商品')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
      // 商品列表子组件...
    }

    Flex({ wrap: FlexWrap.NoWrap }) {
      ForEach(this.tags, (tag:string) =>
      Text(tag)
        .margin(4)
        .padding(8)
        .backgroundColor('#F5F5F5')
      )
    }

Flex({ 
  direction: FlexDirection.Row, 
  wrap: FlexWrap.Wrap, 
  space: {main:LengthMetrics.px(12),
          cross:LengthMetrics.px(12)} 
}) {
  // 动态生成的卡片组件，超出宽度自动换行
}

    Flex({ justifyContent: FlexAlign.SpaceBetween }) {
      Text('返回')
        .fontSize(14)
      Text('页面标题')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
      Button('操作')
        .width(80)
        .height(32)
    }

    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
      Image($r('app.media.icon'))
        .width(24)
        .height(24)
      Text('居中对齐文本')
        .fontSize(14)
        .margin({ left: 8 })
    }

Flex({ direction: FlexDirection.Row }) {
      Image($r('app.media.search'))
        .width(24)
        .height(24)
        .margin({ right: 8 })
      TextInput()
        .flexGrow(1)        // 设置组件在父容器的剩余空间所占比例。
        .height(36)
        .borderRadius(18)
        .backgroundColor('#F5F5F5')
    }

    Flex({ direction: FlexDirection.Row }) {
      Text('固定宽度')
        .width(80)
        .flexBasis('20%')
      Text('弹性宽度')
        .flexBasis('60%')
    }

import { LengthMetrics } from '@kit.ArkUI'
 
@Entry
@Component
struct AdaptiveProductList {
  @State products: string[] = ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6']
 
  build() {
    Flex({
      direction: FlexDirection.Row,
      wrap: FlexWrap.Wrap,
      justifyContent: FlexAlign.Start,
      alignItems: ItemAlign.Center,
      space:{main:LengthMetrics.px(16), cross:LengthMetrics.px(16)}
    }) {
      ForEach(this.products, (product: string) => {
        // 商品项容器
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
          Image($r('app.media.product'))
            .objectFit(ImageFit.Contain)
            .width(this.getImageWidth())  // 动态图片宽度
            .height(this.getImageHeight()) // 动态图片高度
 
          Text(product)
            .fontSize(this.getFontSize())  // 动态字体大小
            .margin({ top: 8 })
        }
        .width(this.getItemWidth()) // 动态商品项宽度
        .padding(this.getItemPadding()) // 动态内边距
        .flexGrow(1)
        .onClick(() => { /* 点击事件处理 */
        }) // 点击区域
      })
    }
    .padding(24)
    .width('100%')
  }
 
  // 商品项宽度计算
  private getItemWidth(): string | number {
    if (DeviceType.isPhone()) {
      return '48%' // 手机端：2列 (100%/2 - 间距)
    } else if (DeviceType.isTablet()) {
      return '32%' // 平板端：3列 (100%/3 - 间距)
    } else {
      return '23%' // 车机端：4列 (100%/4 - 间距)
    }
  }
 
  // 图片尺寸适配
  private getImageWidth(): string {
    return DeviceType.isVehicle() ? '90%' : '80%' // 车机增大图片宽度
  }
 
  private getImageHeight(): number {
    return DeviceType.isVehicle() ? 150 : 120 // 车机增加图片高度
  }
 
  // 字体大小适配
  private getFontSize(): number {
    return DeviceType.isVehicle() ? 18 : 14 // 车机增大字体
  }
 
  // 内边距适配（增大点击区域）
  private getItemPadding(): Padding | number {
    if (DeviceType.isVehicle()) {
      return {
        top: 15,
        bottom: 15,
        left: 10,
        right: 10
      } // 车机增加内边距
    }
    return 0
  }
}

.width(
  DeviceType.isPhone() ? '48%' : 
  DeviceType.isTablet() ? '32%' : '23%'
)

.backgroundColor('#EEEEEE')  // 调试时显示容器边界