Android中Compose系列之按钮Button

文章目录

前言
一、Button的基本使用
二、Button属性

前言

Button是Compose中作为按钮提供交互的控件，它本身属性自带onClick的点击处理，不需要使用Modifiter中的点击功能，目前最新版默认按钮风格为Material风格的圆角，所以需要手动调节为矩形或更改圆角半径。

按钮的官方中文文档参考：https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#button

一、Button的基本使用

1.Button

最常用的按钮，控件本身自带onClick,不需要Modifiter的点击事件，如果两者同时设置时，按钮自身的优先级更高，内容中设置的文字图形等会按照横向布局排列，注意设置颜色时容器的上色与内容的上色有所不同，下图为两种模式下各自设为红色的表现。

kotlin 复制代码

 Button( //默认为material风格的圆角矩形
            onClick = { //设置点击事件时做出的反应
                Log.i("MainActivity", "ButtonSample: 按钮")
            },
            //可以按钮启用与未启用时的容器、内容等颜色
            colors = ButtonDefaults.buttonColors(contentColor = Color.Red), //展示内容的颜色
            modifier = Modifier.padding(10.dp), //内边距
            shape = RectangleShape  //矩形，也可以设置为0dp的圆角RoundedCornerShape(0.dp

        ) { //当前作用域内为横向布局，呈现按钮中展示内容
            Icon(
                Icons.Filled.Favorite, //Material库中的图标
                contentDescription = "实心爱心图案", //无障碍描述
                modifier = Modifier.size(ButtonDefaults.IconSize) //设置尺寸为默认按钮尺寸
            )
            Text("内容1")
        }

下图为下面三种按钮的变体所展示的效果：

2.扩展

TextButton

相当于带有点击事件的文本，系统封装了Text将点击事件添加进去，可以更方便给text设置点击事件，不再需要用Modifiter的点击功能。

kotlin 复制代码

TextButton( //带有点击事件的文本。等同于封装了Text，将点击事件功能添加上，因此，不需要modifier的点击功能
            onClick = {} //点击事件逻辑
        ) {
            Text("封装了点击功能的文本")
        }

OutlinedButton

显示效果为带有主题颜色的边框+透明背景的按钮，当然也可以自己设置来改变这种效果，它的本意是用于次要操作的按钮，以便于跟主要按钮Button区分，避免一个页面按钮过多分散用户注意力，因此可以一个页面设置一个Button，其他用OutlinedButton来提供更好的体验

kotlin 复制代码

OutlinedButton( //带有主题颜色的边框+透明背景的按钮,常用于次要操作按钮，如一个页面中设置一个Button其他都OutLinedButton作为次要操作
            onClick = {}//点击事件逻辑
        ) {
            Text("低视觉权重按钮")
        }

IconButton

用于展示图标的按钮，属于官方封装的便捷按钮，本质是通过Box布局进行的元素堆叠，因此，设置多个元素，会重叠在一起。

kotlin 复制代码

 IconButton( //图标按钮 添加图标与文字后会重叠在一起
            enabled = false, //是否设置禁用
            onClick = { //点击事件逻辑

            }
        ) { //以下内容会重叠在一起，通常只设置一个图案
            Icon(
                Icons.Filled.Favorite, //Material库中的图标
                contentDescription = "实心爱心图案", //无障碍描述
                modifier = Modifier.size(ButtonDefaults.IconSize) //设置尺寸为默认按钮尺寸
            )
            Icon(
                Icons.Filled.AccountBox, //Material库中的图标
                contentDescription = "实心爱心图案", //无障碍描述
                modifier = Modifier.size(ButtonDefaults.IconSize) //设置尺寸为默认按钮尺寸
            )
            Text("内容2")
        }

二、Button属性

kotlin 复制代码

   @Composable
    fun CustomButtonDemo() {
        // 1. 状态管理：监听按钮按下状态（基于interactionSource）
        val interactionSource = remember { MutableInteractionSource() } //缓存 交互状态监听器
        val isPressed by interactionSource.collectIsPressedAsState() // 通过监听器获取当前按下状态
        val isEnabled = remember { mutableStateOf(true) } // 控制按钮启用/禁用

        // 2. 自定义按钮颜色：不同状态下的背景/内容色
        val buttonColors = ButtonDefaults.buttonColors(
            containerColor = Color(0xFF6200EE), // 默认背景色（紫色）
            contentColor = Color.White, // 默认内容色（文字/图标）
            disabledContainerColor = Color.Gray.copy(0.5f), // 禁用时背景色
            disabledContentColor = Color.White.copy(0.7f) // 禁用时内容色
        )

        // 3. 自定义边框：1dp红色边框
        val customBorder = BorderStroke(1.dp, Color.Red)

        // 4. 自定义阴影：按下时增加阴影
        val customElevation = ButtonDefaults.buttonElevation(
            defaultElevation = 4.dp, // 默认阴影
            pressedElevation = 8.dp, // 按下时阴影
            disabledElevation = 0.dp // 禁用时无阴影
        )

        // 5. 按钮主体（结合所有属性）
        Button(
            onClick = {
                // 点击后切换为禁用状态，如果没有外部逻辑启用则不会再触发onclick
                isEnabled.value = !isEnabled.value
                println("按钮被点击，当前启用状态：${isEnabled.value}")
            },
            modifier = Modifier
                .padding(horizontal = 16.dp, vertical = 8.dp) // 外部边距
                .width(200.dp), // 固定宽度
            enabled = isEnabled.value, // 是否禁用通过上面绑定启用状态来决定，也由点击事件所改变
            interactionSource = interactionSource, // 绑定缓存的交互状态源，感知上面设置的按下操作
            elevation = customElevation, // 自定义阴影
            shape = RoundedCornerShape(12.dp), // 自定义圆角（12dp）
            border = customBorder, // 自定义边框
            colors = buttonColors, // 自定义颜色
            contentPadding = PaddingValues(horizontal = 20.dp, vertical = 10.dp), // 自定义内边距
            content = {
                // 按钮内部内容（RowScope，自动横向排列）
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = "确认",
                    modifier = Modifier.size(ButtonDefaults.IconSize)
                )
                // 图标与文字间距
                Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
                // 文字（结合按下状态动态修改）
                Text(
                    text = if (isPressed) "按下中..." else if (isEnabled.value) "点击切换禁用" else "已禁用",
                    style = MaterialTheme.typography.labelLarge
                )
            }
        )
    }