请问一下tab按钮组切换效果

tab按钮组切换效果

HarmonyOS
2024-05-26 14:59:41
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
coolhead2000

核心代码

import { 
  ItemRestriction, 
  SegmentButton, 
  SegmentButtonItemTuple, 
  SegmentButtonOptions, 
  SegmentButtonTextItem 
} from '@ohos.arkui.advanced.SegmentButton' 
 
@Entry 
@Component 
struct Index { 
  // 配置按钮组数组 
  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 
    buttons: [ 
      { text: '美妆' }, 
      { text: '衣服' }, 
      { text: '鞋子' } 
    ] as ItemRestriction<SegmentButtonTextItem>, 
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 
  }) 
  @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 
    buttons: [ 
      { text: '美妆' }, 
      { text: '衣服' }, 
      { text: '鞋子' } 
    ] as SegmentButtonItemTuple, 
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 
  }) 
  // 配置按钮组默认选中项 
  @State tabSelectedIndexes: number[] = [2] 
  @State singleSelectCapsuleSelectedIndexes: number[] = [1] 
 
  build() { 
    Row() { 
      Column() { 
        Column({ space: 25 }) { 
          SegmentButton({ 
            options: this.tabOptions, 
            selectedIndexes: $tabSelectedIndexes 
          }) 
          SegmentButton({ 
            options: this.singleSelectCapsuleOptions, 
            selectedIndexes: $singleSelectCapsuleSelectedIndexes 
          }) 
        } 
        .width('90%') 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

实现效果

注明适配的版本信息

  • IDE:DevEco Studio 4.0.3.600
  • SDK:HarmoneyOS 4.0.10.11
分享
微博
QQ
微信
回复
2024-05-27 19:57:48
相关问题
请问一下鸿蒙的pad应用该如何签名?
6798浏览 • 1回复 待解决
ob有如何报错,麻烦帮忙看一下
3445浏览 • 1回复 待解决
请教一下关于应用分栏实现
277浏览 • 1回复 待解决
请教一下如何开关闪光灯
193浏览 • 1回复 待解决
请教一下如何实现函数的重载
281浏览 • 1回复 待解决
Navigation实现Tabs切换效果
539浏览 • 1回复 待解决
编译OpenHarmony2.0失败,求助一下
7612浏览 • 3回复 已解决
请教一下关于Ticktimer 的疑问?
2133浏览 • 1回复 待解决
如何实现按钮的点击效果
39浏览 • 2回复 待解决
谁分享一下如何实现匿名内部类
340浏览 • 1回复 待解决
想了解一下MD5算法示例。
345浏览 • 1回复 待解决
帐号授权相关问题,和大家讨论一下
11531浏览 • 3回复 待解决