Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

2025-05-24 03:50

本文主要是介绍Kotlin Compose Button 实现长按监听并实现动画效果(完整代码),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大...

想要实现长按按钮开始录音,松开发送的功能。发现 Button 这个控件如果去监听这些按下,松开,长按等事件,发现是不会触发的,究其原因是 Button 已经提前消耗了这些事件所以导致,这些监听无法被触发。因此为了实现这些功能就需要自己写一个 Button 来解决问题。

Button 实现原理

在 Jetpack Compose 中,Button 是一个高度封装的可组合函数(Composable),其底层是由多个 UI 组件组合而成,关键组成包括:Surface、Text、Row、InteractionSource 等

源码

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors javascript= ButtonDefaults.buttonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
) {
    @Suppress("NAME_SHADOWING")
    val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
    val containerColor = colors.containerColor(enabled)
    val contentColor = colors.contentColor(enabled)
    val shadowElevation = elevation?.shadowElevation(enabled, interactionSource)?.value ?: 0.dp
    Surface(
        onClick = onClick,
        modifier = modifier.semantics { role = Role.Button },
        enabled = enabled,
        shape = shape,
        color = containerColor,
        contentColor = contentColor,
        shadowElevation = shadowElevation,
        border = border,
        interactionSource = interactionSource
    ) {
        ProvideContentColorTextStyle(
            contentColor = contentColor,
            textStyle = MaterialTheme.typography.labelLarge
        ) {
            Row(
                Modifier.defaultMinSize(
                        minWidth = ButtonDefaults.MinWidth,
                        minHeight = ButtonDefaults.MinHeight
                    )
                    .padding(contentPadding),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                content = content
            )
        }
    }
}

1. Surface 的作用(关键)

Surface 是 Compose 中的通用容器,负责:

  • 提供背景颜色(来自 ButtonColors)
  • 提供 elevation(阴影)
  • 提供点击行为(通过 onClick)
  • 提供 shape(圆角、裁剪等)
  • 提供 ripple 效果(内部自动通过 indication 使用 rememberRipple())
  • 使用 Modifier.clickable 实现交互响应

注意:几乎所有 Material 组件都会使用 Surface 来包裹内容,统一管理视觉表现。

2. InteractionSource

  • InteractionSource 是 Compose 中管理用户交互状态的机制(如 pressedhoveredfocused
  • Button 将其传入 Surface,用于响应和处理 ripple 动画等
  • MutableInteractionSource 配合,可以观察组件的状态变化

3. ButtonDefaults

ButtonDefaults 是提供默认值的工具类,包含:

  • elevation():返回 ButtonElevation 对象,用于设置不同状态下的阴影高度
  • buttonColors():返回 ButtonColors 对象,用于设置正常 / 禁用状态下的背景与文字颜色
  • ContentPadding:内容的默认内边距 4. Content Slot(RowScope.() -> Unit

4. Content Slot(RowScope.() -> Unit)

Buttoncontent 是一个 RowScope 的 lambda,允许你自由组合子组件,如:

Button(onClick = { }) {
    Icon(imageVector = Icons.Default.Add, contentDescription = null)
    Spacer(modifier = Modifier.width(4.dp))
    Text("添加")
}

因为是在 RowScope 中,所以能用 Spacer 等布局函数在水平排列子项。

关键点说明
Surface提供背景、阴影、圆角、点击、ripple 效果的统一封装
InteractionSource用于收集用户交互状态(点击、悬停等)
ButtonDefaults提供默认颜色、阴影、Padding 等参数
Row + Text内容布局,允许图标 + 文本灵活组合
Modifier控制尺寸、形状、边距、点击响应等

如果想自定义 Button 的样式,也可以直接使用 Surface + Row 自己实现一个“按钮”,只需照着官方的做法组装即可。

@Suppress("DEPRECATION_ERROR")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Button(
    onClick: () -> Unit = {},
    onLongPress: () -> Unit = {},
    onPressed: () -> Unit = {},
    onReleased: () -> Unit = {},
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    shadowElevation: Dp = 0.dp,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit = { Text("LongButton") }
) {
    val containerColor = colors.containerColor
    val contentColor = colors.contentColor
    Surface(
        modifier = modifier
            .minimumInteractiveComponentSize()
            .pointerInput(enabled) {
                detectTapGestures(
                    onPress = { offset ->
                        onPressed()
                        tryAwaitRelease()
                        onReleased()
                    },
                    onTap = { onClick() },
                    onLongPress = { onLongPress() }
                )
            }
            .semantics { role = Role.Button },
        shape = shape,
        color = containerColor,
        contentColor = contentColor,
        shadowElevation = shadowElevation,
        border = border,
    ) {
        CompositionLocalProvider(
            LocalContentColor provides contentColor,
            LocalTextStyle provides LocalTextStyle.current.merge(MaterialTheme.typography.labelLarge),
        ) {
            Row(
                Modifier
                    .defaultMinSize(ButtonDefaults.MinWidth, ButtonDefaults.MinHeight)
                    .padding(contentPadding),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                content = content
            )
        }
    }
}

Button 的动画实现

为了让按钮在按下时提供自然的视觉反馈,Compose 通常会使用状态驱动的动画。最常见的方式是通过 animateColorAsState 来实现颜色的平滑过渡,比如按钮被按下时背景色或文字颜色稍微变暗,松开时再恢复。

这个动画实现的关键点在于:

  • 交互状态:比如是否按下、是否禁用,可以通过 InteractionSource 结合 collectIsPressedAsState() 实时监听当前状态。
  • 根据状态决定目标颜色:当状态变化时(如按下 -> 松开),我们会设置新的目标颜色。
  • 使用动画驱动状态变化:通过 animateColorAsState() 把颜色变化变成带过渡效果的状态变化,而不是突变。

这种方式符合 Compose 的声明式编程模型,不需要手动写动画过程,而是让状态驱动 UI 动画。

下面是按钮颜色动画部分的代码片段,只展示相关的状态监听和动画逻辑,具体如何应用在 UI 中将在后续实现:

@Composable
fun AnimatedButtonColors(
    enabled: Boolean,
    interactionSource: InteractionSource,
    defaultContainerColor: Color,
    pressedContainerColor: Color,
    disabledContainerColor: Color
): State<Color> {
    val isPressed by interactionSource.collectIsPressedAsState()
    val targetColor = when {
        !enabled -> disabledContainerColor
        isPressed -> pressedContainerColor
        else -> defaultContainerColor
    }
    // 返回一个状态驱动的动画颜色
    val animatedColor by animateColorAsState(targetColor, label = "containerColorAnimation")
    return rememberUpdatedState(animatedColor)
}

值得一提的是,Button 使用的动画类型为 ripple (涟漪效果)

这段代码仅负责计算当前的按钮背景色,并通过动画使其平滑过渡。它不会直接控制按钮的点击或布局逻辑,而是为最终的 UI 提供一个可动画的颜色状态。

后续可以将这个 animatedColor 应用于 Surface 或背景 Modifier 上,完成整体的按钮外观动画。

完整动画代码

// 1. 确保 interactionSource 不为空
val interaction = interactionSource ?: remember { MutableInteractionSource() }
// 2. 监听按下状态
val isPressed by interaction.collectIsPressedAsState()
// 4. 按状态选 target 值
val defaultContainerColor = colors.containerColor
val disabledContainerColor = colors.disabledContainerColor
val defaultContentColor = colors.contentColor
val disabledContentColor = colors.disabledContentColor
val targetContainerColor = when {
    !enabled -> disabledContainerColor
    isPressed -> defaultContainerColor.copy(alpha = 0.85f)
    else -> defaultContainerColor
}
val targetContentColor = when {
    !enabled -> disabledContentColor
    isPressed -> defaultContentColor.copy(alpha = 0.9f)
    else -> defaultContentColor
}
// 5. 动画
val containerColorAni by animateColorAsState(targetContainerColor, label = "containerColor")
val contentColorAni by animateColorAsState(targetContentColor, label = "contentColor")
// 涟漪效果
// 根据当前环境选择是否使用新版 Material3 的 ripple(),还是退回到老版的 rememberRipple() 实现
val ripple = if (LocalUseFallbackRippleImplementation.current) {
    rememberRipple(true, Dp.Unspecified, Color.Unspecified)
} else {
    ripple(true, Dp.Unspecified, Color.Unspecified)
}
// 6. Surface + 手动发 PressInteraction
Surface(
    modifier = modifier
        .minimumInteractiveComponentSize()
        .pointerInput(enabled) {
            detectTapGestures(
                onPress = { offset ->
                    // 发起 PressInteraction,供 collectIsPressedAsState 监听
                    val press = PressInteraction.Press(offset)
                    val scope = CoroutineScope(coroutineContext)
                    scope.launch {
                        interaction.emit(press)
                    }
                    // 用户 onPressed
                    onPressed()
                    // 等待手指抬起或取消
                    tryAwaitRelease()
                    // 发 ReleaseInteraction
                    scope.launch {
                        interaction.emit(PressInteraction.Release(press))
                    }
                    // 用户 onReleased
                    onReleased()
                },
                onTap = { onClick() },
                onLongPress = { onLongPress() }
            )
        }
        .indication(interaction, ripple)
        .semantics { role = Role.Button },
    shape = shape,
    color = containerColorAni,
    contentColor = contentColorAni,
    shadowElevation = shadowElevation,
    border = border,
) {...}

这个 Button 的动画部分主要体现在按下状态下的颜色过渡。它通过 animateColorAsState 来实现背景色和文字颜色的动态变化。

当按钮被按下时,会使用 interaction.collectIsPressedAsState() 实时监听是否处于 Pressed 状态,进而动态计算目标颜色(targetContainerColortargetContentColor)。按下状态下颜色会降低透明度(背景 alpha = 0.85,文字 alpha = 0.9),形成按压视觉反馈。

颜色的渐变不是突变的,而是带有过渡动画,由 animateColorAsState 自动驱动。它会在目标颜色发生变化时,通过内部的动画插值器平滑过渡到目标值,用户无需手动控制动画过程。

使用 by animateColorAsState(...) 得到的是 State<Color> 类型的值,它会在颜色变化时自动重组,使整个按钮在交互中呈现更自然的过渡效果。

这种方式相比传统手动实现动画更简洁、声明性更强,也更容易和 Compose 的状态系统集成。

完整代码

// androidx.compose.material3: 1.3.0
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.indication
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.riChina编程pple.rememberRipple
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.LocalUseFallbackRippleImplementation
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphpphics.Shape
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
import kotlin.coroutines.coroutineContext
@Suppress("DEPRECATION_ERROR")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Button(
    onClick: () -> Unit = {},
    onLongPress: () -> Unit = {},
    onPressed: () -> Unit = {},
    onReleased: () -> Unit = {},
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colpythonors: ButtonColors = ButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    shadowElevation: Dp = 0.dp,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit = { Text("LongButton") }
) {
    // 1. 确保 interactionSource 不为空
    val interaction = interactionSource ?: remember { MutableInteractionSource() }
    // 2. 监听按下状态
    val isPressed by interaction.collectIsPressedAsState()
    // 4. 按状态选 target 值
    val defaultContainerColor = colors.containerColor
    val disabledContainerColor = colors.disabledContainerColor
    val defaultContentColor = colors.contentColor
    val disabledContentColor = colors.disabledContentColor
    val targetContainerColor = when {
        !enabled -> disabledContainerColor
        isPressed -> defaultContainerColor.copy(alpha = 0.85f)
        else -> defaultContainerColor
    }
    val targetContentColor = when {
        !enabled -> disabledContentColor
        isPressed -> defaultContentColor.copy(alpha = 0.9f)
        else -> defaultContentColor
    }
    // 5. 动画
    val containerColorAni by animateColorAsState(targetContainerColor, label = "containerColor")
    val contentColorAni by animateColorAsState(targetContentColor, label = "contentColor")
    // 涟漪效果
    // 根据当前环境选择是否使用新版 Material3 的 ripple(),还是退回到老版的 rememberRipple() 实现
    val ripple = if (LocalUseFallbackRippleImplementation.current) {
        rememberRipple(true, Dp.Unspecified, Color.Unspecified)
    } else {
        ripple(true, Dp.Unspecified, Color.Unspecified)
    }
    // 6. Surface + 手动发 PressInteraction
    Surface(
        modifier = modifier
            .minimumInteractiveComponentSize()
            .pointerInput(enabled) {
                detectTapGestures(
                    onPress = { offset ->
                        // 发起 PressInteraction,供 collectIsPressedAsState 监听
                        val press = PressInteraction.Press(offset)
                        val scope = CoroutineScope(coroutineContext)
                        scope.launch {
                            interaction.emit(press)
                        }
                        // 用户 onPressed
                        onPressed()
                        // 等待手指抬起或取消
                        tryAwaitRelease()
                        // 发 ReleaseInteraction
                        scope.launch {
                            interaction.emit(PressInteraction.Release(press))
                        }
                        // 用户 onReleased
                        onReleased()
                    },
                    onTap = { onClick() },
                    onLongPress = { onLongPress() }
                )
            }
            .indication(interaction, ripple)
            .semantics { role = Role.Button },
        shape = shape,
        color = containerColorAni,
        contentColor = contentColorAni,
        shadowElevation = shadowElevation,
        border = border,
    ) {
        CompositionLocalProvider(
            LocalContentColor provides contentColorAni,
            LocalTextStyle provides LocalTextStyle.current.merge(MaterialTheme.typography.labelLarge),
        ) {
            Row(编程
                Modifier
                    .defaultMinSize(ButtonDefaults.MinWidth, ButtonDefaults.MinHeight)
                    .padding(contentPadding),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                content = content
            )
        }
    }
}

到此这篇关于Kotlin Compose Button 实现长按监听并实现动画效果的文章就介绍到这了,更多相关Kotlin Compose Button长按监听内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持China编程(www.chinasem.cn)!

这篇关于Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1154757

相关文章

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分