底部工具栏设计：Row + layoutWeight 等分布局

前言

底部工具栏是写日记页面的重要交互区域，提供了图片、表情、标签、位置和更多操作的入口。“海风日记“的工具栏通过 Row + layoutWeight 实现了 5 个图标的等分布局，每个图标都使用 SymbolGlyph + 文字标签的组合。

本文将从源码出发，深入讲解工具栏的布局实现、图标排列和交互设计。

一、工具栏布局

1.1 源码

Row({ space: 24 }) { // 图片 Column({ space: 4 }) { SymbolGlyph($r('sys.symbol.camera')).fontSize(22).fontColor([COLOR_AMBER]) Text('图片').fontSize(9).fontColor(COLOR_TEXT_HINT) }.layoutWeight(1).alignItems(HorizontalAlign.Center) // 表情 Column({ space: 4 }) { SymbolGlyph($r('sys.symbol.face_smiling')).fontSize(22).fontColor([COLOR_AMBER]) Text('表情').fontSize(9).fontColor(COLOR_TEXT_HINT) }.layoutWeight(1).alignItems(HorizontalAlign.Center) // 标签 Column({ space: 4 }) { SymbolGlyph($r('sys.symbol.list_bullet')).fontSize(22).fontColor([COLOR_AMBER]) Text('标签').fontSize(9).fontColor(COLOR_TEXT_HINT) }.layoutWeight(1).alignItems(HorizontalAlign.Center) // 位置 Column({ space: 4 }) { SymbolGlyph($r('sys.symbol.map')).fontSize(22).fontColor([COLOR_AMBER]) Text('位置').fontSize(9).fontColor(COLOR_TEXT_HINT) }.layoutWeight(1).alignItems(HorizontalAlign.Center) // 更多 Column({ space: 4 }) { SymbolGlyph($r('sys.symbol.ellipsis_circle')).fontSize(22).fontColor([COLOR_AMBER]) Text('更多').fontSize(9).fontColor(COLOR_TEXT_HINT) }.layoutWeight(1).alignItems(HorizontalAlign.Center) } .width('100%').height(60) .padding({ left: PAGE_PADDING, right: PAGE_PADDING }) .backgroundColor(COLOR_CARD_BG) .border({ width: { top: 1 }, color: 'rgba(200,180,140,0.15)' })

二、layoutWeight 等分布局

2.1 layoutWeight 的原理

layoutWeight用于在 Row 或 Column 中按权重分配剩余空间：

Row() { Column().layoutWeight(1) // 每个占 1/5 宽度 Column().layoutWeight(1) Column().layoutWeight(1) Column().layoutWeight(1) Column().layoutWeight(1) }

2.2 权重计算

5 个图标，每个layoutWeight(1)，每个图标宽度 = 总宽度 / 5。

三、编辑页工具栏

编辑页 (EditDiaryPage) 的工具栏使用ForEach实现：

interface ToolbarItem { icon: Resource label: string } ForEach( [ { icon: $r('sys.symbol.camera'), label: '图片' }, { icon: $r('sys.symbol.face_smiling'), label: '表情' }, { icon: $r('sys.symbol.list_bullet'), label: '标签' }, { icon: $r('sys.symbol.map'), label: '位置' }, { icon: $r('sys.symbol.trash'), label: '删除' }, ] as ToolbarItem[], (item: ToolbarItem) => { Column({ space: 4 }) { SymbolGlyph(item.icon).fontSize(22) .fontColor([item.label === '删除' ? '#D06060' : COLOR_AMBER]) Text(item.label).fontSize(9).fontColor(COLOR_TEXT_HINT) }.layoutWeight(1).alignItems(HorizontalAlign.Center) } )

四、工具栏样式

五、常见问题

5.1 图标间距不均匀

问题：工具栏图标间距不均匀。

原因：同时使用了space和layoutWeight。

解决方案：使用layoutWeight时，space设为 0 或去掉。

总结

本文通过“海风日记“的底部工具栏，深入讲解了 Row + layoutWeight 的等分布局：

1. layoutWeight 权重：5 个图标等分宽度
2. SymbolGlyph + Text：图标 + 文字标签
3. ForEach 工具项：编辑页的工具栏
4. 样式统一：高度、背景、边框

下一篇文章将深入讲解Scroll + layoutWeight 实现自适应滚动，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• Row 组件文档
• layoutWeight 属性文档
• SymbolGlyph 文档
• 海风日记项目源码
• [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
• 开源鸿蒙跨平台社区