Compose Button移除水波纹效果

news2024/11/19 0:42:11

一、背景

        在使用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 = true
                            onClick()
                        } 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.coloradmin.cn/o/1707847.html

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

相关文章

NSSCTF-Web题目3

目录 [BJDCTF 2020]easy_md5 1、知识点 2、题目 3、思路 [ZJCTF 2019]NiZhuanSiWei 1、知识点 2、题目 3、思路 第一层 第二层 第三层 [BJDCTF 2020]easy_md5 1、知识点 弱比较,强比较、数组绕过、MD5加密 2、题目 3、思路 1、首先我们跟着题目输入&a…

蒙特卡洛法求解机械臂工作空间(以IRB4600型工业机械臂为例)

1. 概念 工作空间是衡量机器人工作能力的一个重要的运动学指标,蒙特卡洛法是一种随机模拟方法,用于在计算机上估计某些统计量,对于要估计的统计量,通过模拟大量的随机抽样,并计算这些样本的随机值来估算这个统计量的值…

第 8 章 机器人实体导航(自学二刷笔记)

重要参考: 课程链接:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 讲义链接:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 9.1 概述 实体机器人导航与仿真环境下的导航核心实现基本一致,主要区别在于导航实现之前&#xf…

37. 解数独 - 力扣(LeetCode)

基础知识要求: Java: 方法、for循环、if else语句、数组 Python: 方法、for循环、if else语句、列表 题目: 编写一个程序,通过填充空格来解决数独问题。 数独的解法需 遵循如下规则: 数字 1-9 在每一行…

上交提出TrustGAIN,提出6G网络中可信AIGC新模式!

月16日至18日,2024全球6G技术大会在南京召开。会上,全球移动通信标准制定组织3GPP(第三代合作伙伴计划)的3位联席主席分享了3GPP6G标准时间表: 2024年9月,启动6G业务需求研究; 2025年6月&…

代码随想录算法训练营第36期DAY35

DAY35 122买卖股票的最佳时机ii 很巧妙&#xff0c;也很难想到&#xff1a;计算每天的利润&#xff08;今天卖出&#xff0c;昨天买入的利润&#xff09;&#xff0c;只取正数相加。 class Solution {public: int maxProfit(vector<int>& prices) { int…

Broker的主从架构

为了保证MQ的数据不丢失而且具备一定的高可用性&#xff0c;所以一般都是得将Broker部署成Master-Slave模式的&#xff0c;也就是—个Master Broker对应一个Slave Broker Master需要在接收到消息之后&#xff0c;将数据同步给Slave&#xff0c;这样一旦Master Broker挂了&#…

YOLOV10阅读总结

GitHub - THU-MIG/yolov10: YOLOv10: Real-Time End-to-End Object Detection YOLOv10 - Ultralytics YOLO Docs https://arxiv.org/pdf/2405.14458 论文地址 最近yolo又出了个yolov10了&#xff0c;不得不感慨CV是真卷&#xff0c;毕竟yolov9也才没多久。记录一下阅读笔记。…

【JVM】一次JVM内存泄露分析处理

一次内存泄露分析 背景情况 编写了一个大数据基础组件的可用性监控程序&#xff0c;采用Bootstrap监测端口的方式&#xff0c;使得方法常驻&#xff08;main线程常驻&#xff09;&#xff0c;通过一个调度线程ScheduledThreadPoolExecutor&#xff0c;定时的调动监测任务。 …

短视频拍摄方式有哪些:四川鑫悦里文化传媒有限公司

​短视频拍摄方式有哪些 在数字化时代&#xff0c;短视频以其短小精悍、传播迅速的特点&#xff0c;成为了人们表达自我、分享生活的重要工具。然而&#xff0c;想要制作出引人入胜的短视频&#xff0c;除了创意和构思&#xff0c;拍摄方式的选择也至关重要。四川鑫悦里文化传…

详谈 Java中的list.forEach()和list.stream().forEach() 异同点

涉及的文章链接&#xff1a;ArrayList 循环Remove遇到的坑 一、想总结本篇博客的原因 在日常开发中&#xff0c;需要对集合数据进行或多或少的赋值修改&#xff0c;那么循环赋值或者做一些处理就是最常见的一种操作了&#xff0c;但是用习惯了stream流&#xff0c;所以在循环的…

聚合网卡和Wondershaper限速的一些问题(速度减半问题)

首先我们来了解一下聚合网卡&#xff1a; 聚合网卡&#xff0c;又称为链路聚合组&#xff08;LAG, Link Aggregation Group&#xff09;、端口汇聚&#xff08;Port Trunking&#xff09;、以太通道&#xff08;Ethernet Bonding&#xff09;等&#xff0c;是一种网络技术&…

【OpenCV】图形绘制与填充

介绍了绘制、填充图像的API。也介绍了RNG类用来生成随机数。相关API&#xff1a; line() rectangle() circle() ellipse() putText() 代码&#xff1a; #include "iostream" #include "opencv2/opencv.hpp"using namespace std; using namespace cv…

Git和plink

安装git的话首先进入到git官网进行下载Git - Downloading Package (git-scm.com) &#xff0c;点击便会自动进行下载。 安装plink时也是根据自己电脑的版本号选择进行安装&#xff0c;我的是windows的64位&#xff0c;由此选择以上版本进行安装&#xff0c;这一个下载完成之后不…

react中子传父信息

思路是&#xff1a; 在父组件定义一个函数接受参数&#xff0c;接收的参数用于接收子组件的信息&#xff0c;把函数传给子组件&#xff0c;子组件调用父亲传来的函数并把要告诉父亲的话传到函数中&#xff0c;就实现了子传父消息 import { useState } from reactimport { use…

JavaWeb笔记整理+图解——服务器渲染技术之EL表达式与JSTL

上一篇我们讲解了什么是服务器渲染技术和jsp&#xff0c;今天我来整理一下EL表达式和JSTL的笔记与图解&#xff0c;让我们的jsp页面更加的简洁与可维护。 没看过上一期的小伙伴可以看上一期的笔记&#xff1a; JavaWeb笔记全整理——JSP服务器渲染技术-CSDN博客 一、EL表达式…

揭开 SOCKS5 有哪些强大的功能?

在在线隐私和安全领域&#xff0c;SOCKS5 是一种多功能且功能强大的协议&#xff0c;为用户提供了一种无缝的方式来加密他们的互联网流量、绕过防火墙并以增强的匿名性和灵活性访问网络。无论您是担心在线监控、地理封锁还是数据隐私&#xff0c;了解如何利用 SOCKS5 的功能都可…

Apache-Doris单机部署

参考&#xff1a; 快速体验 Apache Doris - Apache Doris 1、Apache Doris是一款 基于MPP架构的高性能、实时的分析型数据库&#xff0c;以高效、简单、统一的特点被人们所熟知&#xff0c;仅需 亚秒级响应时间即可返回海量数据下的查询结果&#xff0c;不仅可以支持高并发的点…

ue引擎游戏开发笔记(46)——简单UI设计

1.需求分析&#xff1a; 玩家操作界面应该有基本的准星和血量显示等内容&#xff0c;告知玩家角色的基本状态。 2.操作实现&#xff1a; 1.较为简单的内容&#xff0c;在控件面板建立相应内容&#xff0c;之后链接到游戏中即可&#xff01; 2.先做准星&#xff0c;在画布上搞个…

Day 56 647. 回文子串 516.最长回文子序列

回文子串 给定一个字符串&#xff0c;你的任务是计算这个字符串中有多少个回文子串。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 示例 1&#xff1a; 输入&#xff1a;“abc”输出&#xff1a;3解释&#xf…