布局组件库：响应式栅格、卡片、分割线组件（252）

在鸿蒙（HarmonyOS）应用开发中，构建一套标准化的布局组件库是实现“一次开发，多端部署”的关键。结合 ArkUI 的声明式语法与响应式布局能力，以下是响应式栅格、卡片与分割线组件的完整封装方案与实战代码：

一、 响应式栅格布局（Responsive Grid）

鸿蒙推荐使用GridRow和GridCol组件来实现响应式栅格。通过配置断点（Breakpoints），可以让栅格在不同屏幕尺寸（手机、平板、PC）下自动调整列数和跨度。

核心特性：

• 断点自适应：通过span属性传入对象，针对不同断点（如sm,md,lg）设置不同的栅格占用数。
• 自动换行：当一行中的列数超过总栅格数（默认12）时，子元素会自动换行。

代码示例：

typescript

编辑

GridRow({ columns: { sm: 12, md: 12, lg: 12 } }) { // 左侧主内容区：手机占满12格，PC占8格 GridCol({ span: { sm: 12, lg: 8 } }) { // 主内容视图 } // 右侧侧边栏：手机占满12格并换行，PC占4格并排 GridCol({ span: { sm: 12, lg: 4 } }) { // 侧边栏视图 } }

二、 通用卡片组件（Universal Card）

卡片是承载图文、列表项等内容的核心容器。为了提升代码复用率，建议使用@BuilderParam装饰器将卡片封装为支持插槽（Slot）的通用组件。

核心特性：

• 内容解耦：通过@BuilderParam定义占位符，父组件可以灵活传入任意 UI 结构。
• 统一视觉：集中管理圆角、阴影、内边距等样式，确保全局视觉一致性。

代码示例：

typescript

编辑

@Component export struct CommonCard { @BuilderParam content: () => void; build() { Column() { this.content(); } .width('100%') .padding(16) .borderRadius(12) .backgroundColor(Color.White) .shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 2 }) } } // 父组件调用 CommonCard() { Column({ space: 8 }) { Text('卡片标题').fontSize(18).fontWeight(FontWeight.Bold) Text('这是卡片的描述内容，支持任意UI结构嵌套。').fontSize(14).fontColor('#666') } }

三、 分割线组件（Divider）

鸿蒙提供了原生的Divider组件用于视觉分隔。在实际开发中，需区分“列表项分割线”与“固定UI分割线”的使用场景。

1. 独立分割线（固定UI场景）
适用于页面模块间的分隔，直接使用Divider组件并自定义样式：

typescript

编辑

Divider() .strokeWidth(1) .color('#E0E0E0') .margin({ top: 12, bottom: 12 })

2. 列表分割线（List场景）
对于List组件，推荐使用其内置的divider属性，系统会自动处理首尾项不绘制分割线以及多列模式下的边距计算：

typescript

编辑

List({ space: 0 }) { ForEach(this.dataList, (item: string) => { ListItem() { Text(item).padding(16) } }) } .divider({ strokeWidth: 1, color: '#F0F0F0', startMargin: 16, endMargin: 16 })