HarmonyOS 6 TabSegmentButtonV2 页签型分段按钮使用文档

文章目录模块导入核心API说明1. 组件必填参数2. 选项对象类型3. 内置判断接口完整代码代码逻辑解析总结模块导入import { SegmentButtonV2Items, TabSegmentButtonV2 } from kit.ArkUI;核心API说明1. 组件必填参数参数作用items绑定分段按钮选项数据集selectedIndex当前选中下标从0开始计数2. 选项对象类型纯文本{text: 文字}图片图标{icon: 系统资源}符号图标{symbol: 系统符号资源}图文混合同时配置texticon/symbol3. 内置判断接口item.isHybrid单个选项是否图文混合items.hasHybrid整组按钮是否存在混合选项完整代码import { SegmentButtonV2Items, TabSegmentButtonV2 } from kit.ArkUI; Entry ComponentV2 struct TabSegmentButtonV2Example { // 1.纯文本选项 Local textItems: SegmentButtonV2Items new SegmentButtonV2Items([ { text: 手机 },{ text: 平板 },{ text: 2in1 },{ text: 智能穿戴 }, ]); Local textSelectedIndex: number 0; // 2.图片图标选项 Local imageItems: SegmentButtonV2Items new SegmentButtonV2Items([ { icon: $r(sys.media.ohos_ic_public_device_phone) }, { icon: $r(sys.media.ohos_ic_public_device_pad) }, { icon: $r(sys.media.ohos_ic_public_device_matebook) }, { icon: $r(sys.media.ohos_ic_public_device_watch) }, ]); Local imageSelectedIndex: number 0; // 3.系统符号图标选项 Local symbolItems: SegmentButtonV2Items new SegmentButtonV2Items([ { symbol: $r(sys.symbol.phone) }, { symbol: $r(sys.symbol.pad) }, { symbol: $r(sys.symbol.matebook) }, { symbol: $r(sys.symbol.watch) }, ]); Local symbolSelectedIndex: number 0; // 4.图文混合选项 Local hybridItems: SegmentButtonV2Items new SegmentButtonV2Items([ { text: 手机, symbol: $r(sys.symbol.phone) }, { text: 平板, symbol: $r(sys.symbol.pad) }, { text: 2in1, symbol: $r(sys.symbol.matebook) }, { text: 智能穿戴, symbol: $r(sys.symbol.watch) }, ]); Local hybridSelectedIndex: number 0; // 5.自由混搭不规则选项 Local freeItems: SegmentButtonV2Items new SegmentButtonV2Items([ { text: 年 },{ text: 月 },{ text: 周 },{ text: 日 }, { icon: $r(sys.media.ohos_ic_public_search_filled) }, ]); Local freeSelectedIndex: number 0; build() { Scroll() { Column({ space: 12 }) { VCard({ title: 纯文本选项 }) { TabSegmentButtonV2({ items: this.textItems, selectedIndex: this.textSelectedIndex, }) } VCard({ title: 纯图片图标选项 }) { TabSegmentButtonV2({ items: this.imageItems, selectedIndex: this.imageSelectedIndex, }) } VCard({ title: 纯符号图标选项 }) { TabSegmentButtonV2({ items: this.symbolItems, selectedIndex: this.symbolSelectedIndex, }) } VCard({ title: 图文混合选项 }) { TabSegmentButtonV2({ items: this.hybridItems, selectedIndex: this.hybridSelectedIndex, }) } VCard({ title: 自由混搭选项 }) { TabSegmentButtonV2({ items: this.freeItems, selectedIndex: this.freeSelectedIndex, }) } // 混合属性判断演示 Button(单项是否图文混合${this.textItems[0].isHybrid}).width(70%) Button(单项是否图文混合${this.hybridItems[0].isHybrid}).width(70%) Button(整组是否含混合项${this.textItems.hasHybrid}).width(70%) Button(整组是否含混合项${this.hybridItems.hasHybrid}).width(70%) } .padding(16) } .backgroundColor(#f1f3f5) .width(100%) .height(100%) } } // 卡片封装组件 Builder function Noop() {} Component export struct VCard { Prop title: ResourceStr; BuilderParam content: () void Noop; build() { Column({ space: 8 }) { Text(this.title) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) this.content() } .backgroundColor(Color.White) .borderRadius(8) .padding(8) .width(100%) } }运行效果如图代码逻辑解析状态声明使用Local定义V2局部状态分别存储5种不同风格的按钮数据集与选中下标。数据实例化通过new SegmentButtonV2Items([])批量创建选项数组支持多种元素随意组合。页签组件挂载固定传入items数据集与selectedIndex选中下标自动渲染页签样式按钮点击自动切换选中状态。混合属性判定isHybrid判断单个选项是否同时存在文字与图标hasHybrid批量判断整组按钮有无混合样式条目总结仅API 18及以上可用低版本无法编译运行必须搭配ComponentV2装饰器不兼容旧式Component写法手表设备暂不支持该组件手机、平板、PC设备正常使用选项支持任意混搭无需统一同一种样式如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力