当前位置：首页 > news >正文

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

news 2026/6/1 10:29:20

文章目录

- 模块导入
- 核心API说明
- - 1. 组件必填参数
  - 2. 选项对象类型
  - 3. 内置判断接口
- 完整代码
- 代码逻辑解析
- 总结

模块导入

import { SegmentButtonV2Items, TabSegmentButtonV2 } from '@kit.ArkUI';

核心API说明

1. 组件必填参数

参数	作用
items	绑定分段按钮选项数据集
selectedIndex	当前选中下标，从0开始计数

2. 选项对象类型

纯文本：{text: '文字'}
图片图标：{icon: 系统资源}
符号图标：{symbol: 系统符号资源}
图文混合：同时配置text+icon/symbol

3. 内置判断接口

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%') } }

运行效果如图：