自定义样式与响应式布局技巧（Flex/Grid/MediaQuery） HarmonyOS 5.0.0 或以上

适配版本：HarmonyOS 5.0.0 或以上
阅读目标：掌握 ArkUI 中的布局系统与样式定制方法，实现多设备响应式适配

🎯 一、ArkUI 布局系统核心概念

🧪 二、使用 Flex 实现响应式换行布局

@Entry
@Component
struct FlexDemo {
  build() {
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
      ForEach(Array.from({ length: 8 }, (_, i) => i + 1), item => {
        Text(`卡片 ${item}`)
          .fontSize(16)
          .backgroundColor('#eee')
          .padding(10)
          .margin(5)
          .borderRadius(6)
      }, item => item)
    }
    .padding(10)
  }
}

✅ 效果说明：

• 超出主轴宽度自动换行

• 每个元素间有 margin，视觉舒适

• 适合标签流式展示、按钮宫格等布局

📐 三、使用 Grid 构建规则网格布局

@Entry
@Component
struct GridDemo {
  build() {
    Grid({ columns: 3 }) {
      ForEach(Array.from({ length: 9 }, (_, i) => i + 1), item => {
        Text(`单元 ${item}`)
          .height(50)
          .backgroundColor('#ddd')
          .textAlign(TextAlign.Center)
          .margin(5)
          .borderRadius(4)
      }, item => item)
    }
    .padding(10)
  }
}

✅ 使用场景：

• 商品卡片展示

• 快捷入口菜单

• 设置页分类网格

📱 四、通过 MediaQuery 实现自适应布局

HarmonyOS 提供 @ohos.device 的 getDeviceType() 以及 Display API 可用于设备判断：

import device from '@ohos.device'
import display from '@ohos.display'

@Entry
@Component
struct ResponsiveCard {
  @State screenWidth: number = 0
  @State isTablet: boolean = false

  aboutToAppear() {
    this.isTablet = device.getDeviceType() === 'tablet'

    display.getDefaultDisplay().then(d => {
      this.screenWidth = d.width
    })
  }

  build() {
    Column() {
      Text(`当前设备：${this.isTablet ? '平板' : '手机'}`)
        .fontSize(18)

      Text(`屏幕宽度：${this.screenWidth}px`)
        .fontSize(16)
    }
    .padding(20)
  }
}

🎨 五、自定义样式技巧

1. 圆角 + 阴影卡片样式

Column()
  .padding(20)
  .borderRadius(16)
  .backgroundColor('#fff')
  .shadow({ radius: 8, color: '#00000022', offsetX: 0, offsetY: 2 })

2. 多主题色配置（黑夜模式）

可通过系统设置或手动定义 @State isDarkMode 切换主题色：

.backgroundColor(this.isDarkMode ? '#000' : '#fff')
.fontColor(this.isDarkMode ? '#fff' : '#000')

✅ 六、小结

📘 下一篇预告

第9篇｜页面状态管理与组件通信：@State、@Prop、@Provide 使用实战

将深入讲解 ArkTS 中三种状态装饰器的使用场景，及父子组件的数据联动。