HarmonyOS ArkTS 实现类似Android中RadioButton得效果

本文主要是介绍HarmonyOS ArkTS 实现类似Android中RadioButton得效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在Android中如实现下图可以用radioGroup和RadioButton实现，但在ArkTs中radio不能实现自定义样式，所以用Tabs来实现这种效果，效果图如下：

一、效果图

二、实现横向布局的三个TabContent，代码如下

 @State currentIndex: number = 0;Row() {Tabs({ barPosition: BarPosition.Start }) {TabContent() {}.tabBar(this.TabBuilder('按钮1', 0))TabContent() {}.tabBar(this.TabBuilder('按钮2', 1));TabContent() {}.tabBar(this.TabBuilder('按钮3', 2))}.scrollable(false).barMode(BarMode.Fixed).barHeight(45)}.height(45).width('80%').margin({ top: 15, bottom: 15 }).backgroundColor($r('app.color.radio_button_no')).borderRadius(10).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)

三、TabContent单独得样式，样式可自定义字体颜色背景等，根据自己的需求进行调整

@Builder TabBuilder(title: string, index: number) {Column() {Text(title)// .margin({ top: $r('app.float.mainPage_baseTab_top') }).fontSize(16).fontWeight(FontWeight.Bold).fontColor(this.currentIndex === index ? $r('app.color.white') : $r('app.color.title_text_color'))}.justifyContent(FlexAlign.Center).height(43).height('90%').width(CommonConstants.FULL_PARENT).borderRadius(10).backgroundColor(this.currentIndex === index ? $r('app.color.radio_button_yes') : $r('app.color.radio_button_no')).onClick(() => {this.currentIndex = index;console.log('index-------' + index)})}

这样就实现了按钮切换的效果，如果还有其他更好的方法欢迎评论交流！！！

这篇关于HarmonyOS ArkTS 实现类似Android中RadioButton得效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---