修改分段按钮样式为圆角矩形-鸿蒙开发者社区-51CTO.COM

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

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

HarmonyOS
2024-05-26 11:11:18
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
踮脚在树梢上

使用的核心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
相关问题
如何绘制带圆角矩形
331浏览 • 1回复 待解决
如何使用canvas绘制圆角矩形
483浏览 • 1回复 待解决
HarmonyOS canvas支持画圆角矩形
272浏览 • 1回复 待解决
HarmonyOS 分段按钮的监听事件
412浏览 • 1回复 待解决
利用native接口实现一个圆角矩形
1593浏览 • 1回复 待解决
文本组件是否支持分段设置字体样式
2099浏览 • 1回复 待解决
HarmonyOS bindSheet如何修改圆角大小?
233浏览 • 1回复 待解决
修改Button的默认样式吗?
254浏览 • 1回复 待解决
LoadingProgress如何修改加载动画样式
1803浏览 • 1回复 待解决
HarmonyOS RSA分段加密乱码
499浏览 • 1回复 待解决