HarmonyOS7 数据看板卡片布局：flexBasis 比固定宽度更顺手-拓冰建站

文章目录

- - 看板卡片不必钉死宽度
  - 数据结构先看这里
  - 状态变量负责让页面动起来
  - 布局代码怎么读
  - 交互逻辑别藏太深
  - 使用时我会怎么改
  - 完整代码
  - 代码里的几个细节
  - 常见改造坑
  - 写在最后

看板卡片不适合一上来写死宽度。flexBasis 更像给卡片一个初始建议尺寸。

这类页面最值得看的不是某一行样式，而是“数据怎么喂给 UI，状态怎么让 UI 变化”。只要这条线顺了，后面换业务数据不会太痛苦。

看板卡片不必钉死宽度

这个案例对应的是「数据看板卡片」。如果只是运行一下效果，当然很快；但真要把它改进自己的项目里，最好先把页面分成“数据层、状态层、布局层、交互层”四块。

我比较推荐这种读法：先看interface定义，再看@State，最后看build()里的Column、Row、Flex怎么嵌套。这样不容易被一长串样式绕晕。

数据结构先看这里

这份代码里的核心数据模型是统计卡片数据结构。它决定了页面每一项需要哪些字段，比如标题、描述、颜色、状态、价格、数量、角标等。很多 ArkUI 页面写得乱，根源不是布局，而是数据字段没想清楚。

如果你要接真实接口，优先改这一层。接口字段名和页面字段名不一致也没关系，可以在请求完成后做一次映射，别把接口返回结构直接塞进 UI 里。那样短期省事，后面改样式会很难受。

状态变量负责让页面动起来

这个案例里最关键的状态是selectedMode。它不是摆设，页面里的选中、展开、切换、数量变化、输入内容，基本都靠它驱动。

写 HarmonyOS7 ArkUI 页面时，我会刻意把“会变的东西”和“不会变的静态数据”分开。像dashboardCards这种列表数据负责提供内容，selectedMode负责描述当前用户操作后的界面状态。这样读代码时很清楚：数据从哪里来，界面为什么变。

布局代码怎么读

布局部分不要从第一行样式读到最后一行，这样很累。先找最外层容器，看页面是纵向结构还是横向结构；再看每个区域内部是Row、Column还是Flex。

这个案例的布局重点是：flexBasis不是强制宽度，而是给 Flex 子项一个初始主轴尺寸。

如果你调页面时发现内容挤压、对齐不准、间距失控，优先检查这几个地方：固定宽高是不是太多，layoutWeight或Blank是否用对，列表项里长文本有没有设置省略，Flex 换行条件是否满足。

交互逻辑别藏太深

这个页面的交互主线是：切换布局模式后，卡片基准宽度变化，换行密度也跟着变化。

小案例里直接在.onClick()里改状态没问题，读起来也直观。但如果后面业务变复杂，比如要请求接口、弹确认框、写缓存，就别把逻辑全塞在事件回调里。可以拆成一个私有方法，让 UI 代码只表达“点了什么”，具体怎么处理交给方法。

使用时我会怎么改

如果你只是学习布局，直接运行下面代码就行。如果你准备放进项目里，我建议按这个顺序改：先替换数据数组，再调整颜色和字体，最后再改交互逻辑。

还有一个小经验：不要一开始就把所有东西拆成组件。先让页面跑通，等你发现某个卡片、按钮组、列表项重复出现两三次，再抽成@Builder或单独组件。这样代码会更贴近真实需求。

完整代码

/** * Flex flexBasis：仪表盘数据卡片布局 * 知识点：flexBasis 设定子项初始主轴大小 */ interface StatCard_lhph { id: number label: string numValue: string unit: string trend: string trendUp: boolean iconEmoji: string cardColor: string basisSize: string } interface LayoutMode_xzdb { modeName: string desc: string basisList: string[] } @Entry @Component struct DashboardFlexBasisPage { @State currentMode: number = 0 private statCards: StatCard_lhph[] = [ { id: 1, label: '今日销售额', numValue: '12,850', unit: '元', trend: '+18.2%', trendUp: true, iconEmoji: '💰', cardColor: '#007DFF', basisSize: '45%' }, { id: 2, label: '新增用户', numValue: '386', unit: '人', trend: '+7.4%', trendUp: true, iconEmoji: '👥', cardColor: '#07C160', basisSize: '45%' }, { id: 3, label: '退款率', numValue: '2.3', unit: '%', trend: '-0.5%', trendUp: false, iconEmoji: '↩️', cardColor: '#FF8C00', basisSize: '28%' }, { id: 4, label: '待处理订单', numValue: '47', unit: '单', trend: '+12', trendUp: true, iconEmoji: '📋', cardColor: '#9B59B6', basisSize: '28%' }, { id: 5, label: '库存预警', numValue: '8', unit: '件', trend: '-3', trendUp: false, iconEmoji: '⚠️', cardColor: '#FF4D4D', basisSize: '36%' }, ] private layoutModes: LayoutMode_xzdb[] = [ { modeName: '自适应模式', desc: 'flexBasis:auto，由内容决定宽度', basisList: ['auto', 'auto', 'auto', 'auto', 'auto'] }, { modeName: '固定比例', desc: 'flexBasis:45% 两列，flexBasis:30% 三列', basisList: ['45%', '45%', '30%', '30%', '30%'] }, { modeName: '黄金比例', desc: '大卡片 60%，小卡片 35%', basisList: ['60%', '35%', '60%', '35%', '100%'] }, { modeName: '全宽模式', desc: 'flexBasis:100% 每项独占一行', basisList: ['100%', '100%', '100%', '100%', '100%'] }, ] @Builder DataCard(card: StatCard_lhph, basisVal: string) { Column({ space: 8 }) { Row() { Text(card.iconEmoji) .fontSize(24) Blank() Text(card.trend) .fontSize(12) .fontColor(card.trendUp ? '#07C160' : '#FF4D4D') .backgroundColor(card.trendUp ? '#EDFAF4' : '#FFF0F0') .padding({ left: 6, right: 6, top: 3, bottom: 3 }) .borderRadius(10) } .width('100%') Text(card.numValue) .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor('#FFFFFF') .alignSelf(ItemAlign.Start) Row({ space: 4 }) { Text(card.label) .fontSize(12) .fontColor('rgba(255,255,255,0.85)') Text(card.unit) .fontSize(12) .fontColor('rgba(255,255,255,0.7)') } } .padding(14) .backgroundColor(card.cardColor) .borderRadius(14) .shadow({ radius: 10, color: card.cardColor + '60', offsetX: 0, offsetY: 4 }) .flexBasis(basisVal) .margin({ right: 10, bottom: 10 }) } build() { Column() { // 标题区 Column({ space: 4 }) { Text('数据仪表盘') .fontSize(22) .fontWeight(FontWeight.Bold) .fontColor('#1A1A1A') Text('今日概览 · 2024/06/01') .fontSize(13) .fontColor('#999999') } .padding({ left: 16, right: 16, top: 24, bottom: 16 }) .alignItems(HorizontalAlign.Start) .width('100%') // 布局模式切换 Column({ space: 8 }) { Text('flexBasis 布局模式:') .fontSize(13) .fontColor('#666666') Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) { ForEach(this.layoutModes, (mode: LayoutMode_xzdb, idx: number) => { Text(mode.modeName) .fontSize(12) .fontColor(this.currentMode === idx ? '#FFFFFF' : '#007DFF') .backgroundColor(this.currentMode === idx ? '#007DFF' : '#EAF3FF') .padding({ left: 12, right: 12, top: 7, bottom: 7 }) .borderRadius(16) .margin({ right: 8, bottom: 6 }) .onClick(() => { this.currentMode = idx }) }) } .width('100%') Text(this.layoutModes[this.currentMode].desc) .fontSize(12) .fontColor('#888888') .padding({ left: 10, right: 10, top: 8, bottom: 8 }) .backgroundColor('#F8F8F8') .borderRadius(8) .width('100%') } .padding({ left: 16, right: 16 }) .width('100%') // 数据卡片区域（Flex Wrap + flexBasis） Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start, alignItems: ItemAlign.Start }) { ForEach(this.statCards, (card: StatCard_lhph, idx: number) => { this.DataCard(card, this.layoutModes[this.currentMode].basisList[idx]) }) } .width('100%') .padding({ left: 16, right: 6, top: 20 }) // flexBasis 说明 Column({ space: 8 }) { Text('💡 flexBasis 说明') .fontSize(14) .fontWeight(FontWeight.Medium) .fontColor('#1A1A1A') Text('flexBasis 设定子项在主轴方向上的初始大小（基准尺寸），优先级高于 width/height。结合 flexGrow 和 flexShrink，共同决定子项的最终渲染尺寸。') .fontSize(13) .fontColor('#666666') .lineHeight(22) } .padding({ left: 16, right: 16, top: 16, bottom: 16 }) .backgroundColor('#F0F7FF') .margin({ left: 16, right: 16, top: 12 }) .borderRadius(12) } .width('100%') .height('100%') .backgroundColor('#F5F6FA') } }