Compose Button移除水波纹效果

一、背景

        在使用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.mzph.cn/bicheng/18276.shtml

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

相关文章

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

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

android怎么告诉系统不要回收

在Android中&#xff0c;如果你想告诉系统不要回收你的应用程序&#xff0c;可以通过设置Activity的属性来实现。你可以设置android:configChanges属性&#xff0c;指定在哪些配置更改时不重新创建Activity。 例如&#xff0c;如果你想指示系统在屏幕方向更改时不要重新创建Ac…

又是一知识点

1.说一下什么是mvvm模式 Model代表数据模型&#xff0c;数据和业务逻辑都在Model层中定义&#xff1b;View代表UI视图&#xff0c;负责数据的展示&#xff1b;ViewModel负责监听Model中数据的改变并且控制视图的更新&#xff0c;处理用户交互操作&#xff1b; View 的变化会自…

小阿轩yx-Shell 编程之循环语句与函数

小阿轩yx-Shell 编程之循环语句与函数 for 循环语句 可以很好地解决顺序编写异常烦琐、困难重重的全部代码 &#xff08;&#xff09;{}&#xff1a;里边写的都是命令 &#xff09;&#xff1a;不能嵌套 $&#xff08;&#xff09;&#xff1a;可以嵌套&#xff0c;适合更…

day42 62.不同路径 63. 不同路径 II

62.不同路径 思路 机器人从(0 , 0) 位置出发&#xff0c;到(m - 1, n - 1)终点。 按照动规五部曲来分析&#xff1a; 1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j] &#xff1a;表示从&#xff08;0 &#xff0c;0&#xff09;出发&#xff0c;…

2-Django项目进阶--继续学生管理系统

目录 项目框架: urls.py views.py modules.py class_data.html add_and_modify.html add_stu.html 笔记: 继承语法 模板继承总结&#xff1a; 班级添加 add_and_modify.html 修改添加公用一个页面即可 views.py 班级修改 views.py url.py 班级删除 views.py…

boost asio异步服务器(2)实现伪闭包延长连接生命周期

闭包 在函数内部实现一个子函数&#xff0c;子函数的作用域内能访问外部函数的局部变量。闭包就是能够读取其他函数内部变量。但是由于闭包会使得函数中的变量都被保存在内存中&#xff0c;内存消耗很大&#xff0c;所以不能滥用闭包&#xff0c;否则会造成程的性能问题&#x…

构造器--5.28

不用一个个属性赋值的方法&#xff1a; 知道了类的创建与使用&#xff0c;但是每次赋值都是一个个调用&#xff0c;我们可以用构造器使得方法简单一点&#xff0c;不用一个个调用属性赋值&#xff0c;直接传参就OK了&#xff1b; 点击类名然后ctrl可以查看构造器 public yanxi…

C++完成特色旅游管理信息系统

背景&#xff1a; 继C完成淄博烧烤节管理系统后&#xff0c;我们来到了特色旅游管理信息系统的代码编写&#xff0c;历史链接点下方。 C完成淄博烧烤节管理系统_淄博烧烤总账管理系统的-CSDN博客 问题描述&#xff1a; 为了更好的管理各个服务小组&#xff0c;开发相应的管…

民国漫画杂志《时代漫画》第30期.PDF

时代漫画30.PDF: https://url03.ctfile.com/f/1779803-1248635414-87c8c8?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!

webpack打包配置项

webpack打包配置项 在config.js 中 module.exports {publicPath: process.env.NODE_ENV production ? / : /, //静态资源目录outputDir: dist, //打包名称assetsDir: static,//静态资源&#xff0c;目录devServer: {port: port,open: false,overlay: {warnings: false,erro…

SpringBoot自动装配源码

自动装配&#xff1a; 实际上就是如何将Bean自动化装载到IOC容器中管理&#xff0c;Springboot 的自动装配时通过SPI 的方式来实现的 SPI&#xff1a;SpringBoot 定义的一套接口规范&#xff0c;这套规范规定&#xff1a;Springboot 在启动时会扫描外部引用 jar 包中的META-IN…

css 渐变色边框

效果图&#xff1a; 代码&#xff1a; <style>:root{--br-radius: 12px;}.list{position: relative;}.list_tle{margin-top: 15px;margin-bottom: 5px;}.item{position: relative;display: inline-flex;} .br1 {padding: 10px 16px;clip-path: inset(0 round 6px);borde…

官宣|HelpLook现已入驻钉钉应用市场,助力企业知识管理知识

前一阵子OpenAI公司最新的GPT-4o技术震撼发布&#xff0c;人工智能的实际应用前景再次引起行业瞩目&#xff0c;或者被GPT4o的数据分析等特色功能折服。如您正寻求将AI技术融入企业知识管理&#xff0c;不要错过HelpLook&#xff01;HelpLook AI知识库已经正式入驻钉钉应用市场…

Flutter 中的 SlideTransition 小部件:全面指南

Flutter 中的 SlideTransition 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;SlideTransition 是一个动画组件&#xff0c;用于创建滑动动画效果&#xff0c;使得子组件可以沿着一个轴滑动进入或滑动退出视图。这种动画效果常用于页面转场、菜单展开收起、元素的添加…

2024-5-8——给植物浇水

2024-5-8 题目来源我的题解方法一 模拟 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2079 我的题解 方法一 模拟 依次模拟浇水动作 使用一个变量 cap维护剩余的水量&#xff0c;使用t作为还未浇水的树的下标。当从第 i−1株植物到达第 i株植物时&#xff1a; 如果 ca…

前端中css穿透样式:deep的用法

在前端开发中&#xff0c;尤其是使用 Vue.js 这样的框架时&#xff0c;有时我们需要在子组件中修改或影响由父组件传递下来的样式。然而&#xff0c;由于组件的封装和样式隔离&#xff0c;直接修改子组件中的样式可能不起作用。这时&#xff0c;我们可以使用 ::v-deep 伪元素来…

基于Android的家庭理财APP的设计与实现(论文+源码)_kaic

摘 要 随着我国居民收入和生活水平的提高&#xff0c;家庭理财成为人们热议的焦点问题。在需求分析阶段&#xff0c;系统从用户的实际需求出发&#xff0c;确定了用户账户管理、记账、数据分析和提醒功能等几个核心需求。用户账户管理包括用户注册、登录和密码找回等基本操作…

【4th chapter】信息安全技术—安全技术、安全架构、安全策略、安全管理、软件的脆弱性

概要 安全技术安全架构安全策略安全管理软件的脆弱性加密技术&#xff08;Encryption Technology&#xff09;安全域架构&#xff08;Security Domain Architecture&#xff09;访问控制策略&#xff08;Access Control Policy&#xff09;信息安全管理体系&#xff08;Inform…

面试数据库八股文十问十答第六期

面试数据库八股文十问十答第六期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;来说说一条 SQL 语句的执行…