HarmonyOS 6 AtomicServiceTabs 纯文本样式使用文档

文章目录纯文本样式核心配置TabBarOptionsTabBarOptions 纯文本构造参数纯文本样式关键规则示例纯文本样式属性说明回调方法纯文本样式效果总结纯文本样式核心配置TabBarOptions纯文本样式通过TabBarOptions构造参数控制仅配置文本、文本颜色不传入图标资源即可实现纯文本标签栏。TabBarOptions 纯文本构造参数newTabBarOptions(icon:string,// 图标路径纯文本样式传空字符串 text:string,// 标签显示文本必填textColor:Color,// 未选中文本颜色selectedColor:Color// 选中文本颜色)纯文本样式关键规则图标参数必须传空字符串不配置图标组件自动渲染纯文本标签仅通过textColor未选中、selectedColor选中控制文本样式无需额外配置图标属性极简实现纯文本标签导航示例// 1. 导入依赖import{AtomicServiceTabs,TabBarOptions,TabBarPosition,OnContentWillChangeCallback}fromkit.ArkUI;EntryComponentstruct Index{StatecurrentIndex:number0;// 当前选中索引StatecomingIndex:number0;// 即将切换的索引StateonClickNumber:number0;// 标签点击次数// 页面切换前回调onContentWillChangeCallBack:OnContentWillChangeCallback(currentIndex:number,comingIndex:number):boolean{this.currentIndexcurrentIndex;this.comingIndexcomingIndex;console.info(OnContentWillChangeCallback);returntrue;// 返回true允许切换}// 标签点击回调onTabClick:Callbacknumber(index:number){this.onClickNumber;console.info(onTabClick);}// 标签页内容构造器BuildertabContent1(){Column().width(100%).height(100%).backgroundColor(#00CB87)}BuildertabContent2(){Column().width(100%).height(100%).backgroundColor(#007DFF)}BuildertabContent3(){Column().width(100%).height(100%).backgroundColor(#FFBF00)}build(){Stack().height(100%){// 2. 初始化AtomicServiceTabsAtomicServiceTabs({tabContents:[// 标签页内容()this.tabContent1(),()this.tabContent2(),()this.tabContent3()],// 3. 纯文本样式核心配置icon传空字符串仅配置文本文本颜色tabBarOptionsArray:[newTabBarOptions(,绿色,Color.Black,Color.Green),newTabBarOptions(,蓝色,Color.Black,Color.Blue),newTabBarOptions(,黄色,Color.Black,Color.Yellow),],tabBarPosition:TabBarPosition.BOTTOM,// 标签栏位置底部barBackgroundColor:$r(sys.color.ohos_id_color_bottom_tab_bg),// 标签栏背景色onTabBarClick:this.onTabClick,// 点击回调onContentWillChange:this.onContentWillChangeCallBack,// 切换前回调})// 状态展示Column(){Text(onchange回调次数:this.onClickNumber)Text(即将切换索引this.comingIndex 当前索引this.currentIndex)}.margin({top:500})}}}运行效果如图纯文本样式属性说明参数作用纯文本配置要求icon标签图标纯文本模式必须传空字符串text标签显示文字必填自定义展示文本如首页、我的textColor未选中时文本颜色支持Color枚举/十六进制颜色值selectedColor选中时文本颜色支持Color枚举/十六进制颜色值tabBarPosition标签栏位置可选TOP顶部/BOTTOM底部barBackgroundColor标签栏背景色支持系统资源/自定义颜色回调方法onTabBarClick触发时机点击标签时触发参数index当前点击的标签索引onContentWillChange触发时机标签页切换前触发参数currentIndex当前页索引、comingIndex即将切换页索引返回值true允许切换false禁止切换纯文本样式效果底部标签栏仅显示文字无图标未选中标签文本为黑色选中标签文本分别为绿色/蓝色/黄色点击标签可切换页面触发回调更新状态总结工程限制仅支持**元服务Atomic Service**工程普通应用工程不渲染、无响应纯文本强制要求图标参数必须传不传/传null会导致样式异常版本要求基于鸿蒙API 11kit.ArkUI库支持如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力