底部工具栏设计：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) } )四、工具栏样式属性值说明高度60vp工具栏高度背景COLOR_CARD_BG卡片背景色顶部边框1px 半透明分隔线图标大小22vpSymbolGlyph 尺寸文字大小9vp标签文字五、常见问题5.1 图标间距不均匀问题工具栏图标间距不均匀。原因同时使用了space和layoutWeight。解决方案使用layoutWeight时space设为 0 或去掉。总结本文通过“海风日记“的底部工具栏深入讲解了 Row layoutWeight 的等分布局layoutWeight 权重5 个图标等分宽度SymbolGlyph Text图标 文字标签ForEach 工具项编辑页的工具栏样式统一高度、背景、边框下一篇文章将深入讲解Scroll layoutWeight 实现自适应滚动敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Row 组件文档layoutWeight 属性文档SymbolGlyph 文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区