请添加图片描述
请添加图片描述

一、引言：管理后台仪表盘的布局设计

1.1 仪表盘——数据可视化的核心入口

仪表盘（Dashboard）是现代企业管理系统的核心界面。无论是电商平台的数据监控、企业运营的实时看板，还是 IoT 设备的管理后台，仪表盘始终承载着最高密度的信息呈现任务。一个典型的仪表盘界面需要同时展示：

  • 核心 KPI 指标：用户数、收入、活跃度、转化率等关键业务数据
  • 数据可视化区域：趋势图、分布图等图表占位
  • 最近活动/订单列表：表格形式展示最新动态
  • 顶部导航/操作栏：应用标识和快捷操作入口

在移动端开发中，实现这样的布局通常需要多层嵌套的线性容器，开发者需要手动计算每个卡片的宽度、间距和换行逻辑。而在鸿蒙 ArkUI 中，Grid 组件 以声明式的方式彻底解决了这个问题——只需设置 columnsTemplate 和 rowsTemplate，网格布局自动完成。

1.2 HarmonyOS NEXT 6.1.1 与 ArkUI 布局能力

HarmonyOS NEXT 6.1.1（API 24）是鸿蒙生态的重要里程碑。这一版本完全移除了 Android AOSP 代码，基于纯鸿蒙内核运行。ArkUI 作为其声明式 UI 框架，提供了完整的布局组件体系：

组件 用途 适用场景
Column 纵向弹性布局 页面整体架构、纵向列表
Row 横向弹性布局 标题栏、行内对齐
Grid 二维网格布局 仪表盘卡片、图片画廊、日历
Flex 弹性盒布局 自适应换行、等比分布
Stack 层叠布局 浮动按钮、遮罩层、背景叠加

在这些组件中，Grid 是最适合仪表盘场景的布局方案——它天然支持行列定义，配合 columnsTemplate 和 rowsTemplate 属性，开发者可以用简洁的声明式代码创建出规整的卡片网格。

1.3 本文实践内容

本文以一个完整的 Dashboard 仪表盘页面为例，深入剖析以下核心技术：

  • Grid 网格布局：columnsTemplate fr 单位、rowsTemplate 行高控制
  • 卡片设计体系：linearGradient 渐变背景、shadow 阴影层次
  • 深色主题设计：配色方案与视觉层次
  • @Builder 组件化：6 个构建方法拆分 UI
  • @State 状态管理：静态展示页中的状态实践
  • layoutWeight 弹性比例：列宽分配机制

项目基于 HarmonyOS NEXT 6.1.1（API 24），编译链 Hvigor 6.1.1，完整源码 273 行（DashboardDemo.ets），构建验证通过。

1.4 ArkTS 在管理后台开发中的优势

选择 ArkTS 开发管理后台类应用有以下几个关键优势：

1. 声明式布局简化代码量

传统命令式开发中，创建一个 2×2 的卡片网格需要编写循环创建容器、手动计算每个卡片的位置和尺寸。而在 ArkTS 中，只需一行 columnsTemplate('1fr 1fr') 就能定义两列等宽网格，Grid 组件自动完成所有位置计算。

2. 深色主题原生支持

ArkUI 的线性渐变（linearGradient）、阴影（shadow）等视觉属性原生支持深色主题开发，无需依赖第三方 UI 库。

3. 组件化与复用

@Builder 装饰器天然支持组件化拆分，在管理后台这种包含大量重复卡片/列表/表格的场景中，复用能力大幅降低代码量。

4. 响应式适配

fr 单位的弹性分配机制使得 Grid 布局天然支持不同屏幕尺寸——在手机、平板、折叠屏上都能自动适配列宽。

二、整体布局架构

2.1 六层纵向结构

Dashboard 采用"固定顶部 + 可滚动内容"的经典架构：

Column (全屏容器, #0F1923 深空蓝黑底色)
├── Row (height:56vp)        ① 顶部导航栏 (固定)
│   [D Dashboard]    🔔 [A]
│
├── Scroll (layoutWeight:1)  ② 可滚动内容主体 (弹性占满)
│   └── Column (padding:16)
│       ├── Column           ③ 欢迎横幅 + 统计标签
│       ├── Grid (2×2)       ④ ★★★ KPI 指标卡片网格
│       ├── Grid (2×1)       ⑤ ★★★ 图表卡片网格
│       └── Column           ⑥ 订单列表卡片
│
└── (Blank 底部留白)

2.2 数据驱动的卡片模型

仪表盘的数据组织围绕三种数据接口展开：

/** KPI 指标卡片 */
interface KpiData {
  title: string;      // 指标名称（如 "总用户数"）
  value: string;      // 数值（如 "12,846"）
  change: string;     // 变化率（如 "+12.5%"）
  trend: 'up'|'down'; // 趋势方向（决定箭头颜色）
  icon: string;       // 图标 Emoji
  start: string;      // 渐变起始色
  end: string;        // 渐变结束色
}

/** 图表卡片 */
interface ChartData {
  title: string;      // 图表标题
  type: string;       // 图表类型描述
  sub: string;        // 副标题/数据概览
  color: string;      // 主题色（传递给柱状图）
}

/** 订单行 */
interface OrderData {
  id: string;         // 订单号
  customer: string;   // 客户名
  product: string;    // 商品
  amount: string;     // 金额
  status: string;     // 状态文本
  sc: string;         // 状态颜色（数据驱动）
}

设计要点：

  1. trend: 'up'|'down' 使用字符串字面量联合类型，比 boolean 可读性更好
  2. sc 状态颜色放在数据中：业务颜色由数据层控制，方便未来接入后端 API
  3. 所有数值字段使用 string：保留千分位逗号格式化，UI 层直接展示

2.3 @State 状态变量与生命周期

Dashboard 虽然是一个静态展示页面，但仍然使用了 @State 装饰器管理状态：

@State kpis: KpiData[] = [ /* 4 张卡片数据 */ ];
@State charts: ChartData[] = [ /* 2 张图表数据 */ ];
@State orders: OrderData[] = [ /* 4 条订单数据 */ ];
@State dateStr: string = '';

这些 @State 变量承载了页面的全部数据。dateStr 是动态生成的，在 aboutToAppear 生命周期中初始化：

aboutToAppear(): void {
  const d = new Date();
  const w = ['日','一','二','三','四','五','六'];
  this.dateStr = `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日 星期${w[d.getDay()]}`;
}

aboutToAppear 是 ArkUI 组件的生命周期方法之一，在组件即将挂载到视图树时执行。它与 build() 方法的关系如下：

组件创建 → aboutToAppear() → build() → UI 渲染完成 → aboutToDisappear()

在 aboutToAppear 中适合做数据初始化、网络请求发起等操作。与之对应的 aboutToDisappear 在组件销毁时执行，适合做清理资源、取消定时器等操作。

2.4 build() 方法的组织

Dashboard 的 build() 方法结构清晰，充当了整个页面的"目录"：

build() {
  Column() {
    // ① 顶部栏
    this.buildHeaderPart()
    // ② 内容主体
    Scroll() {
      Column() {
        this.buildBanner()               // ③ 欢迎横幅
        this.buildKpiGrid()              // ④ KPI 网格
        this.buildChartGrid()            // ⑤ 图表网格
        this.buildOrderSection()         // ⑥ 订单列表
        Blank().height(24)
      }
    }
    .layoutWeight(1)
  }
}

直接看 build() 方法就能快速理解页面的整体结构——这是 @Builder 组件化的核心价值。build() 不关心每个区域的内部实现细节，只关注"有哪些区域"和"区域的排列顺序"。

三、Grid 组件深度解析——仪表盘的布局骨架

3.1 Grid 的核心概念

Grid 是 ArkUI 中用于创建二维网格布局的核心组件。与 Row/Column 的线性排列不同，Grid 允许组件在水平和垂直两个方向上同时排列。Grid 的三大核心属性：

  • columnsTemplate：定义列数和每列宽度，使用 fr 单位
  • rowsTemplate：定义行数和每行高度，使用 fr 单位
  • columnsGap / rowsGap：列与列、行与行之间的间距

3.2 fr 单位详解

fr（fraction unit，分数单位）是 Grid 布局中分配剩余空间的专用单位：

'1fr 1fr' → 两列等宽，各占可用宽度的 50%
'1fr 2fr 1fr' → 三列比例 1:2:1，即 25% : 50% : 25%

fr 与百分比的核心区别：

特性 fr 单位 百分比
计算基准 剩余空间 父容器总宽度
受其他列影响 是（fr 总量变化影响分配） 否（各自独立）
与非 fr 列兼容 是（先分配非 fr 列） 需手动计算剩余

在仪表盘场景中，'1fr 1fr' 是最常用的配置——两列卡片各占 50% 宽度，适配不同屏幕宽度。

3.3 KPI 网格的完整配置

/** ★★★ KPI 卡片网格 (2列×2行) ★★★ */
@Builder
buildKpiGrid(): void {
  this.buildSectionTitle('📈 核心指标','导出报告')
  Grid() {
    ForEach(this.kpis, (k: KpiData) => {
      GridItem() {
        Column() {
          // 图标行 + 趋势箭头
          Row() {
            Text(k.icon).fontSize(28)
            Blank()
            Text(k.trend==='up'?'↑':'↓').fontSize(14)
              .fontColor(k.trend==='up'?'#2ECC71':'#E74C3C')
          }
          // 数值
          Text(k.value).fontSize(26).fontWeight(FontWeight.Bold).fontColor('#FFF')
          // 标题 + 变化率
          Row() {
            Text(k.title).fontSize(13).fontColor('#B0C4DE')
            Blank()
            Text(k.change).fontSize(13)
              .fontColor(k.trend==='up'?'#2ECC71':'#E74C3C')
          }
        }
      }
      .height(140).borderRadius(16).padding(18)
      .linearGradient({direction:GradientDirection.Bottom,colors:[[k.start,0],[k.end,1]]})
      .shadow({radius:8,color:'#33000000',offsetY:4})
    })
  }
  .columnsTemplate('1fr 1fr')   // 2列等宽
  .rowsTemplate('1fr 1fr')      // 2行等高
  .columnsGap(12).rowsGap(12)
  .width('100%').height(140*2+12)
}

关键配置解析：

  • columnsTemplate('1fr 1fr')：两列各占可用宽度的 50%
  • rowsTemplate('1fr 1fr')：两行等高，各占 Grid 总高度的一半
  • height(140*2+12)：总高度 = 行高 × 2 + 行间距（140+140+12 = 292vp）
  • columnsGap(12).rowsGap(12)：卡片之间 12vp 间距，产生呼吸感

3.4 图表网格的配置

@Builder
buildChartGrid(): void {
  this.buildSectionTitle('📊 数据分析','全部报表')
  Grid() {
    ForEach(this.charts, (c: ChartData) => {
      GridItem() {
        Column() {
          // 标题行
          Row() {
            Text(c.title).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#FFF')
            Blank()
            Text(c.sub).fontSize(11).fontColor('#8899AA')
              .backgroundColor('#2A3A4A').borderRadius(10)
              .padding({left:8,right:8,top:2,bottom:2})
          }.width('100%').margin({bottom:8})
          Text(c.type).fontSize(12).fontColor(c.color)
          // 模拟柱状图
          Row() {
            ForEach([20,35,25,45,30,50], (h:number) => {
              Column().width(12).height(h)
                .backgroundColor(c.color).borderRadius(6)
                .margin({left:3,right:3}).opacity(0.6)
                .alignSelf(ItemAlign.End)
            })
          }
          .width('100%').height(60).alignItems(VerticalAlign.Bottom)
          .justifyContent(FlexAlign.SpaceEvenly).margin({top:12})
        }
      }
      .height(180).backgroundColor('#1E2D3D').borderRadius(16).padding(18)
      .shadow({radius:8,color:'#22000000',offsetY:4})
    })
  }
  .columnsTemplate('1fr 1fr')   // 2列等宽
  .rowsTemplate('1fr')          // 1行
  .columnsGap(12)
  .width('100%').height(180)
}

图表网格使用 rowsTemplate('1fr') 表示只有 1 行，占据 Grid 的全部高度。两个 GridItem 通过 columnsTemplate('1fr 1fr') 等分宽度。

3.5 柱状模拟图实现

图表卡片中使用 Column 组件模拟了简单的柱状图：

ForEach([20,35,25,45,30,50], (h:number) => {
  Column()
    .width(12).height(h)                  // 每根柱子高度不同
    .backgroundColor(c.color)             // 使用卡片主题色
    .borderRadius(6)                      // 圆角柱状
    .margin({left:3,right:3})
    .opacity(0.6)                         // 半透明柔和
    .alignSelf(ItemAlign.End)             // 底部对齐
})

关键技术点：

  • alignSelf(ItemAlign.End)：每个柱状条在 Row 中底部对齐，形成从底部生长出来的视觉效果
  • opacity(0.6)：半透明让柱状条看起来更柔和，不抢夺卡片内容的视觉焦点
  • 高度数组 [20,35,25,45,30,50]：模拟上升趋势的数据序列

四、卡片视觉设计体系

4.1 四色渐变方案

四张 KPI 卡片采用不同的渐变色，既区分类别又增加视觉层次：

卡片 起始色 结束色 视觉效果
总用户数 #4A90D9 #357ABD 专业冷静的蓝色
总收入 #27AE60 #1E8449 增长财富的绿色
活跃用户 #E67E22 #CA6F1E 活力充沛的橙色
转化率 #8E44AD #6C3483 高级感的紫色 
.linearGradient({
  direction: GradientDirection.Bottom,  // 从上到下渐变
  colors: [
    [k.start, 0],   // 起始色在 0% 位置
    [k.end, 1]      // 结束色在 100% 位置
  ]
})

GradientDirection.Bottom 表示渐变方向从上到下，颜色数组中的 [颜色, 位置] 元组定义每个颜色在渐变路径上的百分比位置。

4.2 阴影层次

阴影（shadow）是卡片设计的关键元素，为组件增加立体层次：

// KPI 卡片阴影
.shadow({radius:8, color:'#33000000', offsetY:4})

// 欢迎横幅阴影（更大半径，更突出）
.shadow({radius:12, color:'#33000000', offsetY:4})

// 图表/订单卡片阴影（更淡）
.shadow({radius:8, color:'#22000000', offsetY:4})

阴影参数的视觉影响：

  • radius（模糊半径）：值越大阴影越柔和、扩散越广。横幅使用 12 比卡片的 8 更突出
  • color（阴影颜色）：#33000000 表示黑色背景 20% 透明度（33/255≈0.2）。图表卡片使用 #22（13% 透明度）更淡
  • offsetY: 4：向下偏移 4vp，模拟上方光源效果

4.3 深色主题配色方案

Dashboard 采用完整深色主题配色体系：

背景底色:     #0F1923 (深空蓝黑)
导航栏底色:   #1A2A3A (深蓝灰)
卡片底色:     #1E2D3D (深灰蓝)
文字主色:     #FFFFFF (白色)
文字次要:     #B0C4DE (浅灰蓝)
文字辅助:     #8899AA (中灰蓝)
强调色蓝:     #4A90D9
上涨色:       #2ECC71 (绿色)
下跌色:       #E74C3C (红色)

通过 6 个灰度层级建立清晰的视觉层次：底色最暗、卡片次暗、导航栏介于之间、文字从亮到暗递减。

五、@Builder 组件化拆分

5.1 六个 @Builder 方法

Dashboard 将 UI 拆分为 6 个 @Builder 方法：

@Builder 职责 参数 行数
buildBanner() 欢迎横幅 无 22
buildStatChip() 统计小标签 3 个 8
buildKpiGrid() KPI 卡片网格 无 30
buildChartGrid() 图表卡片网格 无 35
buildOrderSection() 订单列表 无 38
buildSectionTitle() 区域标题 2 个 7

5.2 带参数的 @Builder

buildStatChip 接受 3 个参数，在欢迎横幅中调用三次：

@Builder
buildStatChip(icon:string, label:string, value:string): void {
  Row() {
    Text(icon).fontSize(16).margin({right:8})
    Column() {
      Text(value).fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFF')
      Text(label).fontSize(11).fontColor('#8899AA')
    }.alignItems(HorizontalAlign.Start)
  }.layoutWeight(1)    // 三等分宽度
  .padding({top:8,bottom:8})
  .justifyContent(FlexAlign.Center)
}

三个 chip 都设置了 layoutWeight(1)，外层的 Row 按照 1:1:1 的比例等分宽度——无需任何计算代码。

Row() {
  this.buildStatChip('📦','本月订单','326')
  this.buildStatChip('👤','新增用户','1,247')
  this.buildStatChip('⭐','好评率','98.6%')
}

5.3 区域标题生成器

buildSectionTitle 是一个轻量级的标题生成器，只需一行调用就能创建统一的区域标题：

@Builder
buildSectionTitle(title:string, action:string): void {
  Row() {
    Text(title).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#FFF')
    Blank()
    Text(action).fontSize(13).fontColor('#4A90D9')
  }.width('100%').margin({top:16,bottom:12})
}

调用示例：

this.buildSectionTitle('📈 核心指标','导出报告')
this.buildSectionTitle('📊 数据分析','全部报表')
this.buildSectionTitle('📋 最近订单','查看全部')

六、订单列表的表格布局

6.1 layoutWeight 列宽控制

订单列表使用 layoutWeight 精确控制每列的宽度比例：

Row() {
  Text('订单号').layoutWeight(1.5)
  Text('客户').layoutWeight(1)
  Text('商品').layoutWeight(1.5)
  Text('金额').layoutWeight(0.8)
  Text('状态').layoutWeight(0.8)
}

比例分配：1.5 : 1 : 1.5 : 0.8 : 0.8。设计考量："订单号"和"商品"内容较长分配更多宽度，"金额"和"状态"较短分配较少宽度。

6.2 彩色状态标签

订单状态使用带背景色的 Text 组件，颜色由数据驱动：

Text(o.status)
  .fontSize(12).fontColor('#FFF')
  .backgroundColor(o.sc)     // 数据驱动：已完成→绿、处理中→橙、待发货→蓝
  .borderRadius(10)
  .padding({left:8,right:8,top:2,bottom:2})

三种状态对应三种颜色，颜色值存储在订单数据中。

6.3 条件分隔线

if (i < this.orders.length-1) {
  Divider().height(1).color('#2A3A4A').width('100%').margin({left:16})
}

margin({left:16}) 让分隔线从文字对齐位置开始，而非撑满整行——与 iOS 系统设置的分隔线风格一致。

七、项目工程配置

7.1 构建版本

// build-profile.json5
{
  "app": {
    "products": [{
      "name": "default",
      "targetSdkVersion": "6.1.1(24)",
      "compatibleSdkVersion": "6.1.1(24)",
      "runtimeOS": "HarmonyOS"
    }]
  }
}

7.2 页面路由

{
  "src": ["pages/DashboardDemo"]
}

7.3 EntryAbility 入口

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/DashboardDemo', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'App', 'Failed: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(0x0000, 'App', 'Succeeded.');
    });
  }
}

7.4 构建命令

# 快速验证（约 1.5 秒）
hvigorw PreBuildApp --no-daemon

# Debug 构建
hvigorw assembleApp --mode debug --no-daemon

# Release 构建
hvigorw assembleApp --mode release --no-daemon

八、常见问题与解决方案

8.1 Grid 内容不显示

现象：Grid 定义正确但 GridItem 内容不渲染。

原因：Grid 缺乏有效的宽度或高度。

解决：

// 确保 Grid 有明确的宽度和高度
Grid() {
  GridItem() { /* 内容 */ }
    .height(140)
}
.columnsTemplate('1fr 1fr')
.width('100%')        // Grid 必须有宽度
.height(140*2+12)     // Grid 必须有高度

8.2 渐变不生效

现象：设置了 linearGradient 但组件背景无变化。

原因：backgroundColor 与 linearGradient 冲突。

解决：使用 linearGradient 时不要同时设置 backgroundColor。

// ❌ 错误：两个背景属性冲突
Column() { }
  .backgroundColor('#FFF')
  .linearGradient({...})

// ✅ 正确：只用线性渐变
Column() { }
  .linearGradient({...})

8.3 shadow 不显示

原因：组件没有设置背景色，阴影需要有背景的组件才能投射。

解决：确保组件有 backgroundColor 或背景相关属性。

8.4 GridItem 高度不一致

原因：GridItem 的内容高度不同，且 Grid 未设置 rowsTemplate。

解决：设置 rowsTemplate('1fr 1fr') 强制所有行等高，布局更加整齐。

8.5 ForEach 中 key 的重要性

在 Grid 中使用 ForEach 时，虽然没有显式指定 key 生成器，但框架内部使用索引作为默认 key。当数据源稳定不变时这没有问题，但如果需要动态增删 GridItem，建议提供 key 生成器：

// 为每个 GridItem 提供唯一标识，帮助框架优化渲染
ForEach(this.kpis, (k: KpiData) => {
  GridItem() { /* ... */ }
}, (k: KpiData) => k.title)

key 生成函数返回一个稳定且唯一的标识符。当数据发生变化时，框架通过 key 精准定位需要更新的 GridItem，而不是重建整个 Grid。

8.6 性能优化建议

对于包含大量 GridItem 的页面，以下优化策略可以有效提升渲染性能：

限制嵌套深度：GridItem 内部的 Column 嵌套不宜超过 3-4 层。Dashboard 的 KPI 卡片中 Column 嵌套深度为 3 层（GridItem → Column → Row/Text），这是合理的范围。

避免在 GridItem 中使用动画：频繁触发的动画（如旋转、缩放）会导致 GridItem 反复重绘。如果必须使用动画，考虑使用 Canvas 替代。

合理设置 Grid 高度：明确设置 Grid 的 height 属性，避免框架进行额外的布局测量。

九、从 Demo 到生产的升级路径

9.1 功能升级对照

组件 Demo 实现 生产级方案
KPI 数据 静态 @State 数组 API 请求 + @State
图表 Column 模拟柱状图 Canvas 绘制 / 图表库
订单列表 内存数据 List + LazyForEach
下拉刷新 无 Refresh 组件
响应式适配 固定 2 列 根据屏幕宽度动态调整列数

9.2 响应式列数适配

平板等大屏设备可采用 3 列或 4 列布局：

// 根据屏幕宽度动态设置列模板
const screenWidth = display.getDefaultDisplaySync().width;
const columns = screenWidth > 600 ? '1fr 1fr 1fr' : '1fr 1fr';
// columnsTemplate(columns)

十、布局 API 速查

组件/属性 用途 示例
Grid 网格布局 Grid() { GridItem() {...} }
columnsTemplate 列模板 '1fr 1fr' 两列等宽
rowsTemplate 行模板 '1fr 1fr' 两行等高
columnsGap 列间距 12
rowsGap 行间距 12
linearGradient 线性渐变 {direction:Bottom, colors:[[c,0],[c,1]]}
shadow 阴影 {radius:8, color:'#33000000', offsetY:4}
layoutWeight 弹性权重 1 占 1 份
borderRadius 圆角 16 统一圆角
scrollBarState 滚动条状态 BarState.Off 隐藏
editMode Grid 编辑模式 false 关闭编辑
backgroundColor 背景色 '#FFF' 白色
alignItems 交叉轴对齐 VerticalAlign.Center 垂直居中
justifyContent 主轴对齐 FlexAlign.Center 水平居中

10.2 常用构建命令

# 快速验证项目配置（推荐每次修改后执行，约 1-2 秒）
hvigorw PreBuildApp --no-daemon

# Debug 调试构建
hvigorw assembleApp --mode debug --no-daemon

# Release 发布构建（需配置签名证书）
hvigorw assembleApp --mode release --no-daemon

# 查看所有可用任务
hvigorw tasks

10.3 颜色参考表

Dashboard 暗色主题使用的完整配色：

用途 色值 描述
页面背景 #0F1923 深空蓝黑
导航栏背景 #1A2A3A 深蓝灰
卡片背景 #1E2D3D 中蓝灰
主文字 #FFFFFF 纯白
次要文字 #B0C4DE 浅灰蓝
辅助文字 #8899AA 中灰蓝
强调蓝色 #4A90D9 按钮/链接
上涨色 #2ECC71 绿色+
下跌色 #E74C3C 红色-

十一、总结

11.1 技术要点回顾

本文通过一个 273 行的 Dashboard 仪表盘 Demo，系统讲解了 ArkUI 在管理后台场景下的核心布局技术：

  1. Grid 网格布局：columnsTemplate('1fr 1fr') + rowsTemplate 构建规整卡片网格
  2. fr 单位：Grid 弹性宽度分配的核心机制
  3. 卡片视觉体系：四色渐变 + 阴影层次 + 圆角
  4. 深色主题配色：6 级灰度层次 + 4 色强调色
  5. @Builder 组件化：6 个构建方法 + 参数化复用
  6. layoutWeight 列宽控制：订单列表的比例分配
  7. 数据驱动颜色：状态颜色从数据传入而非 UI 硬编码

11.2 核心理念

ArkUI 的布局哲学可以总结为三点：

  • 声明式描述：用 columnsTemplate 声明列数，而非循环创建布局容器
  • 状态驱动：数据变化自动触发 UI 更新，无需手动操作 DOM
  • 组件化拆分：@Builder 将复杂页面拆分为独立维护的逻辑单元

11.3 从案例中学习

Dashboard 仪表盘是 ArkUI 综合布局能力的缩影。它同时展示了：

  • Grid：二维网格布局的核心用法
  • Column + Scroll：纵向可滚动内容架构
  • Row + layoutWeight：横向弹性权重分配
  • linearGradient + shadow：视觉设计体系
  • @Builder：组件化 UI 拆分方法
  • @State：状态变量管理

掌握了这些技术，开发者就可以用 ArkTS 构建从简单到复杂的各种应用界面。无论是管理后台、社交媒体、电商应用还是工具类应用，ArkUI 的布局系统都能提供完整的解决方案。

11.4 展望

随着 HarmonyOS NEXT 的持续迭代，ArkUI 的布局能力在 API 24 基础上不断增强。未来的版本将带来自定义布局引擎、更智能的测量缓存、跨设备自适应布局等新特性。对于正在进入鸿蒙生态的开发者而言，现在就是深入 ArkUI 布局系统的最佳时机。

# harmonyos # 华为 # 鸿蒙系统 # 鸿蒙
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

基于鸿蒙NEXT ArkTS框架的AI心情日记应用开发实践

avatar 人工智能6S服务平台
cover

基于鸿蒙NEXT ArkTS构建AI穿搭顾问：从零打造智能穿搭推荐应用

avatar 人工智能6S服务平台
cover

鸿蒙NEXT ArkTS实战：从零构建AI学习助手应用全解析

avatar 人工智能6S服务平台