Compose Button移除水波纹效果

news/2024/7/14 17:53:12/文章来源:https://blog.csdn.net/FrancisBingo/article/details/139276354

一、背景

        在使用Compose实现Button按钮时,设计要求移除按钮的水波纹效果,只保留按压效果,经查Compose1.4.3版本中,并没有直接移除水波纹的能力

二、遇到问题

        经过多次尝试,使用Compose的Button组件始终无法实现目标效果,使用Box+Text 最终绘制的效果Text显示的颜色和字间距又和Button效果渲染的不一致,

三、效果演示

        这里就不演示了。代码在下面,你试试就知道效果了

                        

三、实现方案

        经过多次失败后,看了一下Compose的Button组件源码,找到问题所在。最终得出以下效果实现代码

@Composable
fun ButtonBlackOutline(modifier: Modifier = Modifier, content: String, onClick: () -> Unit) {var isPressed by remember { mutableStateOf(false) }var buttonRect by remember { mutableStateOf(Rect.Zero) }Box(modifier = modifier.background(color = if (isPressed) colorResource(id = CommonColor.common_pressed_btn_color) else colorResource(id = CommonColor.color_transparent),shape = RoundedCornerShape(100.dp)).fillMaxWidth().height(40.dp).border(0.5.dp, colorResource(id = CommonColor.text_600), RoundedCornerShape(100.dp)).pointerInteropFilter {when (it.action) {MotionEvent.ACTION_DOWN -> {isPressed = true}MotionEvent.ACTION_UP -> {if (buttonRect.contains(offset = Offset(it.x, it.y))) {isPressed = trueonClick()} else {isPressed = false}}MotionEvent.ACTION_CANCEL -> {isPressed = false}MotionEvent.ACTION_MOVE -> {if (buttonRect.contains(offset = Offset(it.x, it.y))) {isPressed = true} else {isPressed = false}}}true}.onGloballyPositioned { coordinates ->buttonRect = Rect(offset = coordinates.positionInWindow(),size = coordinates.size.toSize())},contentAlignment = Alignment.Center,content = {// 实现和Button效果一致的重要代码CompositionLocalProvider(LocalContentAlpha provides ButtonDefaults.buttonColors().contentColor(enabled = true).value.alpha) {ProvideTextStyle(value = MaterialTheme.typography.button) {Text(text = content)}}})
}

        

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

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

相关文章

Linux系统之touch命令的基本使用

Linux系统之touch命令的基本使用 一、touch命令介绍1. touch命令简介2. touch命令作用 二、touch命令帮助1. touch命令的帮助信息2. touch命令的选项解释 三、touch命令的基本使用1. 查看touch工具版本2. 创建空文件3.查看空文件属性4. 修改文件时间戳5. 文件不存在时不创建 四…

前端开发工程师——AngularJS

一.表达式和语句 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-w…

读后感:《SQL数据分析实战》运营SQL实用手册

学习SQL&#xff0c;先有用起来&#xff0c;有了使用价值&#xff0c;之后才是去了解它的原理&#xff0c;让使用更加顺畅。 在大部分业务场景中&#xff0c;通过SQL可以快速的实现数据处理与统计。《SQL数据分析实战》区别于其他工具书&#xff0c;它并没有介绍SQL是什么&…

【论文阅读|cryoET】DeepETPicker:使用弱监督深度学习的快速准确cryoET三维颗粒挑选算法

题目 DeepETPicker: Fast and accurate 3D particle picking for cryo-electron tomography using weakly supervised deep learning 发表期刊&#xff1a; Nature Communications 发表时间&#xff1a;2024.02 Accepted 作者&#xff1a;Guole Liu, Tongxin Niu 中科院自动化…

新火种AI|警钟长鸣!教唆自杀,威胁人类,破坏生态,AI的“反攻”值得深思...

作者&#xff1a;小岩 编辑&#xff1a;彩云 在昨天的文章中&#xff0c;我们提到了谷歌的AI Overview竟然教唆情绪低迷的网友“从金门大桥跳下去”。很多人觉得&#xff0c;这只是AI 模型的一次错误判断&#xff0c;不会有人真的会因此而照做。但现实就是比小说电影中的桥段…

【Mybatis】映射文件中获取单个参数和多个参数的写法

xml的映射文件中获取接口方法中传来的参数是直接用#{}的方式来获取的 那么接下来&#xff0c;我们就具体来说一下获取参数里边的各种规则和用法 1.单个参数&#xff0c;比如上面的getOneUser&#xff0c;只有一个id值作为参数 Mybatis对于只有一个参数的情况下&#xff0c;不…

html通过数据改变,图片跟着改变

改变前 改变后 通过数据来控制样式展示 <template><div>通过num控制图标是否更改{{num}}<div class"box"><!-- 如果num大于1则是另一种&#xff0c;样式&#xff0c;如果小时1&#xff0c;则是另一种样式 --><div class"item&qu…

部署CNI网络组件+k8s多master集群部署+负载均衡

一、环境部署 主机服务 192.168.91.5 K8S集群master01192.168.91.8 K8S集群master02192.168.91.6K8S集群node01192.168.91.7K8S集群node02192.168.91.9 负载均衡nginxkeepalive01&#xff08;master&#xff09;192.168.91.10 负载均衡nginxkeepalive02&#xff08;backup&am…

数据库技术基础

数据库技术基础 导航 文章目录 数据库技术基础导航一、基础概念数据库系统数据库管理系统DBMS分类数据库技术的发展数据库体系结构 二、数据模型数据模型基本概念 三、数据库的控制功能事务概述SOL中事务定义语句日志文件故障种类两个操作Undo/Redo事务故障的恢复系统故障的恢…

黑马es0-1实现自动补全功能

1、安装分词器 上github上找人做好的分词器&#xff0c;放到es-plugin数据卷里&#xff0c;然后重启es即可 2、自定义分词器 elasticsearch中分词器(analyzer)的组成包含三部分: character filters:在tokenizer之前对文本进行处理。例如删除字符、替换字符 …

微信小程序连接阿里云快速入门【物联网】

一、前言 1.1 项目背景 随着5G的逐渐普及&#xff0c;万物互联的浪潮已经席卷而来。在万物互联的场景下&#xff0c;如何实现设备之间的互联互通&#xff0c;成为了一个亟待解决的问题。 微信小程序作为一款轻量级的小程序开发框架&#xff0c;以其简洁的语法和丰富的组件库…

【STM32嵌入式系统设计与开发---传感器拓展】——1_2_蓝牙主从模块_AT配置(HC-05)

一、主机蓝牙设置 # 1、重置模块 ATORGL # 2、设置名字&#xff0c;自己随便设置 ATNAMEMaster # 3、设置连接密码&#xff0c;要和从机一样&#xff0c;密码好像可以不加双引号 ATPSWD"1234" # 4、设置为主机 ROLE 1 为主机 ROLE 0为从机 ATROLE1 # 5、设置波特…

[9] CUDA性能测量与错误处理

CUDA性能测量与错误处理 讨论如何通过CUDA事件来测量它的性能如何通过CUDA代码进行调试 1.测量CUDA程序的性能 1.1 CUDA事件 CPU端的计时器可能无法给出正确的内核执行时间CUDA事件等于是在你的CUDA应用运行的特定时刻被记录的时间戳&#xff0c;通过使用CUDA事件API&#…

SqliSniper:针对HTTP Header的基于时间SQL盲注模糊测试工具

关于SqliSniper SqliSniper是一款基于Python开发的强大工具&#xff0c;该工具旨在检测HTTP请求Header中潜在的基于时间的SQL盲注问题。 该工具支持通过多线程形式快速扫描和识别目标应用程序中的潜在漏洞&#xff0c;可以大幅增强安全评估过程&#xff0c;同时确保了速度和效…

K8s种的service配置

什么是service 官方的解释是:   k8s中最小的管理单元是pod&#xff1b;而service是 将运行在一个或一组 Pod 上的网络应用程序公开为网络服务的方法;   Kubernetes 中 Service 的一个关键目标是让你无需修改现有应用以使用某种服务发现机制。 你可以在 Pod 集合中运行代码…

[C][动态内存分配][柔性数组]详细讲解

目录 1.动态内存函数的介绍1.malloc2.free2.calloc4.realloc 2.常见的动态内存错误3.C/C程序的内存开辟4.柔性数组1.是什么&#xff1f;2.柔性数组的特点3.柔性数组的使用4.柔性数组的优势 1.动态内存函数的介绍 1.malloc 函数原型&#xff1a;void* malloc(size_t size)功能…

流水账(CPU设计实战)——lab3

Lab3 Rewrite V1.0 版本控制 版本描述V0V1.0相对V0变化&#xff1a; 修改了文件名&#xff0c;各阶段以_stage结尾&#xff08;因为if是关键词&#xff0c;所以module名不能叫if&#xff0c;遂改为if_stage&#xff0c;为了统一命名&#xff0c;将所有module后缀加上_stage&a…

Java | Leetcode Java题解之第118题杨辉三角

题目&#xff1a; 题解&#xff1a; class Solution {public List<List<Integer>> generate(int numRows) {List<List<Integer>> ret new ArrayList<List<Integer>>();for (int i 0; i < numRows; i) {List<Integer> row new…

《探索Stable Diffusion:AI绘画的创意之路与实战秘籍》

《Stable Diffusion AI 绘画从提示词到模型出图》介绍了 Stable Diffusion AI 绘画工具及其使用技巧。书中内容分为两部分&#xff1a;“基础操作篇”&#xff0c;讲解了 SD 文生图、图生图、提示词、模型、ControlNet 插件等核心技术的应用&#xff0c;帮助读者快速从新手成长…

基于C#开发web网页管理系统模板流程-主界面管理员入库和出库功能完善

前言 紧接上篇->基于C#开发web网页管理系统模板流程-主界面管理员录入和编辑功能完善-CSDN博客 本篇将完善主界面的管理员入库和出库功能&#xff0c;同样的&#xff0c;管理员入库和出库的设计套路适用于动态表的录入和编辑 首先还是介绍一下本项目将要实现的功能 &#xf…