修改分段按钮样式为圆角矩形

分段按钮的按钮样式变成圆角矩形。

HarmonyOS
2024-05-26 11:11:18
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
blue76

使用的核心API

SegmentButton

核心代码解释

默认是胶囊形,修改为圆角矩形样式。

单文本或者是单图标的情况下都达不到效果,只有有文本+图标都有的情况下才能达到效果。

核心代码如下:

// xxx.ets 
import { 
SegmentButton, 
SegmentButtonItemTuple, 
SegmentButtonOptions, 
} from '@ohos.arkui.advanced.SegmentButton' 
​ 
@Entry 
@Component 
struct Index { 
@State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 
buttons: [ 
{ text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 
{ text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 
{ text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 
{ text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 
{ text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 
] as SegmentButtonItemTuple, 
multiply: false 
}) 
@State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1] 
​ 
build() { 
Row() { 
Column() { 
Column({ space: 25 }) { 
SegmentButton({ options: this.iconTextCapsuleOptions, 
selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 
}.width('90%') 
}.width('100%') 
}.height('100%') 
} 
}

适配的版本信息

IDE:DevEco Studio 4.1.3.200

SDK:4.1.0.18

分享
微博
QQ
微信
回复
2024-05-27 10:56:23
相关问题
文本组件是否支持分段设置字体样式
934浏览 • 1回复 待解决
利用native接口实现一个圆角矩形
565浏览 • 1回复 待解决
LoadingProgress如何修改加载动画样式
554浏览 • 1回复 待解决
lottile动画如何切圆角
482浏览 • 0回复 待解决
如何实现渐变的圆角边框
897浏览 • 1回复 待解决
AES加解密长字符串是否需要分段
187浏览 • 1回复 待解决
UIAbility是否可以设置圆角
703浏览 • 1回复 待解决
buttom样式怎么添加?
5255浏览 • 2回复 待解决
WebView支持设置WebView圆角吗?
443浏览 • 1回复 待解决