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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/328806.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Xilinx RAM IP核的使用及注意事项

对于RAM IP核(Block Memory Generator核)的使用以及界面的配置介绍,文章RAM的使用介绍进行了较详细的说明,本文对RAM IP核使用中一些注意的地方加以说明。 文章目录 三种RAM的区别单端口RAM(Single-port RAM)简单双端口RAM(Simple Dual-port RAM)真双端…

商品服务:SPUSKU规格参数销售属性

1.Object划分 1.PO(Persistant Object)持久对象 PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合。PO中应该不报含任何对数据库的操作 2.DO(Domain Object) 领域对象 就是从现实世界中抽象出来的有形或无形的业务实体。 3…

线程池的简单实现与应用

1.什么是线程池 线程池其实就是一种多线程处理形式,处理过程中可以将任务添加到队列中,然后在创建线程后自动启动这些任务。 线程池最大的好处就是减少每次启动、销毁线程的损耗。 2.线程池参数介绍 参数名称说明corePoolSize正式员工的数量.(正式员…

代码随想录——填充每个节点的下一个右侧节点指针 II(Leetcode117)

题目链接 层序遍历 /* // Definition for a Node. class Node {public int val;public Node left;public Node right;public Node next;public Node() {}public Node(int _val) {val _val;}public Node(int _val, Node _left, Node _right, Node _next) {val _val;left _l…

21【Aseprite 作图】画白菜

1 对着参考图画轮廓 2 缩小尺寸 变成这样 3 本来是红色的描边,可以通过油漆桶工具(取消 “连续”),就把红色的轮廓线,变成黑色的 同时用吸管工具,吸取绿色和白色,用油漆桶填充颜色 4 加上阴影…

svn批量解锁

问题 svn对文件进行checkout之后,先进行lock,之后再去更改,最后进行Commit操作; 上述为我们通过svn管理代码的正常方式,但总会有其他现象发生; 如果我们非正常操作,批量锁所有的svn文件&#x…

Django Celery 的配置及使用---最详细教程

Django Celery 的配置及使用 Redis提供队列消息功能 一、安装redis 系统版本:Ubuntu 20.041、获取最新软件包 sudo apt update sudo apt install redis-server2、安装完成后,Redis服务器会自动启动。查看redis是否启动成功 sudo systemctl status …

uniapp + vue3 设置 axios proxy 代理,并重写路径

uniapp vue2 设置代理如下: 已生成的项目架构里面找到manifest.json文件,通过源码视图的方式打开文件,在文件中添加一下代码即可完成代理: "h5": {"devServer": {"disableHostCheck": true, //禁…

Milvus的系统架构

简介 Milvus的构建在许多知名的向量搜索库比如Faiss, HNSW, DiskANN, SCANN等之上的,它针对稠密向量数据集的相似搜索而设计,能支持百万、十亿甚至万亿级别的向量搜索。 Milvus支持数据分片,流式数据插入,动态schema&#xff0c…

离散型制造行业智能工厂标准解决方案(49页 PPT)

方案介绍: 该解决方案的核心功能模块包括生产计划与排程、质量控制与追溯、设备管理与维护、物料管理与仓储以及供应链协同等。通过智能算法和数据分析,实现对生产过程的精准控制和优化。同时,智能工厂还支持远程监控和预测性维护&#xff0…

15.计算机网络

1.物理层的互联设备 中继器 和 集线器 2.集线器可以看做特殊的多路中继器 集线器 不可以做到自动寻址的功能 3.数据链路层 网桥 和 交换机 4.交换机是多端口网桥 5.网络层 路由器 6.应用层 网关 7.广播域 网络层 可以形成多个广播域 冲突域 网络层数据链路层 可以形成多个冲突域…

三大平台直播视频下载保存方法

终于解决了视频号下载的问题,2024年5月15日亲测可用。 而且免费。 教程第二部分,有本地电脑无法下载的解决方案。 第一部分:使用教程(正常) 第1步:下载安装包 下载迅雷网盘搜索:大海福利合集…

STM32时钟系统和时钟树

目录 STM32时钟系统 认识时钟树 什么是时钟 认识时钟树(F407) 配置系统时钟 系统时钟配置步骤 外设时钟使能和失能 sys_stm32_clock_init函数(F4) 时钟配置一般步骤 System文件夹_时钟系统工作原理 System文件夹介绍 Sys文件介绍 Delay文件介绍 Systic工作原理 S…

vue2人力资源项目9权限管理

页面搭建 <template><div class"container"><div class"app-container"><el-button size"mini" type"primary">添加权限</el-button><el-table-column label"名称" /><el-table-co…

基于Pytorch深度学习神经网络MNIST手写数字识别系统源码(带界面和手写画板)

第一步&#xff1a;准备数据 mnist开源数据集 第二步&#xff1a;搭建模型 我们这里搭建了一个LeNet5网络 参考代码如下&#xff1a; import torch from torch import nnclass Reshape(nn.Module):def forward(self, x):return x.view(-1, 1, 28, 28)class LeNet5(nn.Modul…

二.使用PgAdmin连接Postgresql

二.使用PgAdmin连接Postgresql PostgreSQL是一种开源的对象关系型数据库管理系统(ORDBMS),它支持大部分SQL标准并提供了许多高级功能,例如事务、外键、视图、触发器等。PostgreSQL由PostgreSQL全球开发组维护和开发,它是一种高度可扩展的数据库系统,可以在各种操作系统…

finallyshell激活-支持所有版本(老版 + 最新版) + 所有平台(mac + windows)

一&#xff1a;打开finally shell的激活页面 二&#xff1a;点击离线激活 三&#xff1a;复制机器码&#xff0c;然后执行一下代码 原文&#xff1a;大哥原文&#xff0c;但是这个大佬是用java实现的&#xff0c;执行因为依赖的问题一直报错 基于以上问题&#xff0c;所以使…

linux Docker在线/离线服务安装并支持centos7和centos8系统

注&#xff1a;以下内容都是经过测试;能在生产环境使用. 一、centos7版本的docker在线安装 1&#xff1a;运行以下命令&#xff0c;下载docker-ce的yum源。 sudo wget -O /etc/yum.repos.d/docker-ce.repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo…

Electron学习笔记(五)

文章目录 相关笔记笔记说明 七、系统1、系统对话框2、自定义窗口菜单3、系统右键菜单4、快捷键(1)、监听网页按键事件 &#xff08;窗口需处于激活状态&#xff09;(2)、监听全局按键事件 &#xff08;窗口无需处于激活状态&#xff09;(3)、补充&#xff1a;自定义窗口菜单快捷…

ModuleNotFoundError: No module named ‘sklearn‘

ModuleNotFoundError: No module named sklearn 解决办法&#xff1a; pip install scikit-learn