文章目录模块导入核心能力说明全局样式修饰器子项样式配置完整代码代码逻辑解析运行效果使用总结模块导入import { SymbolGlyphModifier, DividerModifier, LengthMetrics, ColorMetrics, ToolBarV2Item, ToolBarV2Modifier, ToolBarV2ItemText, ToolBarV2ItemImage, ToolBarV2, ToolBarV2ItemState, ToolBarV2SymbolGlyph } from kit.ArkUI;核心能力说明全局样式修饰器ToolBarModifier自定义工具栏整体高度、背景颜色、左右内边距、是否开启按压水波纹效果。DividerModifier自定义工具栏顶部分割线高度、颜色可设置高度为0隐藏分割线。子项样式配置ToolBarV2ItemText设置工具栏文字默认颜色、激活态文字颜色。ToolBarV2ItemImage普通图片图标支持常态、激活态图标颜色定制。ToolBarV2SymbolGlyphSymbol 矢量图标可分别配置普通态、激活态图标样式与颜色。ToolBarV2ItemState控制子项启用、禁用、激活三种交互状态。完整代码import { SymbolGlyphModifier, DividerModifier, LengthMetrics, ColorMetrics, ToolBarV2Item, ToolBarV2Modifier, ToolBarV2ItemText, ToolBarV2ItemImage, ToolBarV2, ToolBarV2ItemState, ToolBarV2SymbolGlyph } from kit.ArkUI; Entry ComponentV2 struct Index { Local toolbarList: ToolBarV2Item[] []; // 自定义工具栏全局样式 private toolBarModifier: ToolBarV2Modifier new ToolBarV2Modifier().height(LengthMetrics.vp(52)) .backgroundColor(ColorMetrics.resourceColor(Color.Transparent)) .stateEffect(false); // 自定义分割线样式 Local dividerModifier: DividerModifier new DividerModifier().height(0); aboutToAppear() { this.toolbarList.push( new ToolBarV2Item({ content: new ToolBarV2ItemText({ text: Long long long long long long long long text, activatedColor: ColorMetrics.resourceColor($r(sys.color.font_primary)) }), icon: new ToolBarV2SymbolGlyph({ normal: new SymbolGlyphModifier($r(sys.symbol.ohos_star)).fontColor([Color.Green]), activated: new SymbolGlyphModifier($r(sys.symbol.ohos_star)).fontColor([Color.Red]), }), action: () { }, state: ToolBarV2ItemState.ACTIVATE, }) ) this.toolbarList.push( new ToolBarV2Item({ content: new ToolBarV2ItemText({ text: Copy, activatedColor: ColorMetrics.resourceColor(#ffec5d5d) }), icon: new ToolBarV2ItemImage({ src: $r(sys.media.ohos_ic_public_copy), color: ColorMetrics.resourceColor(#ff18cb53), activatedColor: ColorMetrics.resourceColor(#ffec5d5d), }), action: () { }, state: ToolBarV2ItemState.DISABLE, })) this.toolbarList.push( new ToolBarV2Item({ content: new ToolBarV2ItemText({ text: Paste, color: ColorMetrics.resourceColor(#ff18cb53) }), icon: new ToolBarV2ItemImage({ src: $r(sys.media.ohos_ic_public_paste), }), action: () { }, state: ToolBarV2ItemState.ACTIVATE, }) ) this.toolbarList.push( new ToolBarV2Item({ content: new ToolBarV2ItemText({ text: All, }), icon: new ToolBarV2ItemImage({ src: $r(sys.media.ohos_ic_public_select_all), }), action: () { }, state: ToolBarV2ItemState.ACTIVATE, })) this.toolbarList.push( new ToolBarV2Item({ content: new ToolBarV2ItemText({ text: 分享, }), icon: new ToolBarV2ItemImage({ src: $r(sys.media.ohos_ic_public_share), }), action: () { }, })) this.toolbarList.push( new ToolBarV2Item({ content: new ToolBarV2ItemText({ text: 分享, }), icon: new ToolBarV2ItemImage({ src: $r(sys.media.ohos_ic_public_share), }), action: () { }, }) ) } build() { Row() { Stack() { Column() { ToolBarV2({ toolBarModifier: this.toolBarModifier, dividerModifier: this.dividerModifier, activatedIndex: 0, toolBarList: this.toolbarList, }) .height(52) } }.align(Alignment.Bottom) .width(100%).height(100%) } } }运行效果如图代码逻辑解析全局样式初始化通过ToolBarModifier设置工具栏高度 52vp、背景透明、关闭按压水波纹DividerModifier设置分割线高度为0直接隐藏分割线。工具栏子项批量构建在aboutToAppear中循环构建多个工具栏条目混合使用Symbol 矢量图标和普通图片图标分别配置常态、激活态文字与图标颜色。状态差异化设置给不同条目设置ACTIVATE激活态、DISABLE禁用态自动应用对应文字和图标配色。组件绑定配置将自定义全局样式、分割线样式、激活索引、工具栏列表传入 ToolBarV2自动完成布局渲染超过5个条目自动收纳至更多菜单。运行效果工具栏整体高度自定义为52vp背景透明无顶部分割线无按压水波纹效果第一个条目为 Symbol 星星图标常态绿色、激活态红色文字使用自定义激活色禁用条目图标与文字自动置灰自定义专属配色长文本自动适配换行排版不会挤压布局超出5个功能项自动折叠到右侧更多菜单布局自适应。使用总结ToolBarV2 仅支持 API18、ComponentV2 语法及 Stage 模型穿戴设备不可使用。不建议给组件直接设置通用属性容易产生额外节点导致样式失效。支持全局工具栏样式 单个子项图文样式双层定制同时兼容普通图标与 Symbol 矢量图标可分别设置常态/激活态颜色满足复杂UI定制需求。建议统一在生命周期初始化样式与列表数据提升页面渲染性能。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力