Jetpack Compose基础组件之 Button

概述

本文基于androidx.compose.material3依赖进行分析。依赖版本

makefile 复制代码

makefile
 代码解读
复制代码
androidx.compose.material3:material3-android:1.3.1

Button是 Jetpack Compose 中用于创建可点击按钮的组件。它提供了丰富的自定义选项，可以轻松地创建美观且功能强大的按钮。

Compose Button 用法文档

要使用 Button 组件，只需导入 androidx.compose.material3.Button 并在 Composable 函数中调用它。以下是对 Button 组件的基本用法和一些高级特性的介绍。

onClick: () -> Unit

描述: 指定按钮被点击时执行的操作。
示例:

less 复制代码

Button(onClick = { /* 执行点击操作 */ }) {
      Text("点击我")
  }

enabled: Boolean

描述: 控制按钮是否可点击。当设置为 false 时，按钮将变为禁用状态，无法响应点击事件。
示例:

less 复制代码

  Button(onClick = { /* 点击操作 */ }, enabled = false) {
      Text("已禁用")
  }

colors: ButtonColors

描述: 自定义按钮的颜色样式，包括背景颜色、内容颜色等。
常用方法:

containerColor: 设置按钮的背景颜色。

contentColor: 设置按钮内容（如文本）的颜色。
示例:

less 复制代码

  import androidx.compose.material3.ButtonDefaults

  Button(
      onClick = { /* 点击操作 */ },
      colors = ButtonDefaults.buttonColors(containerColor = Color.Blue, contentColor = Color.White)
  ) {
      Text("蓝色按钮")
  }

shape: Shape

描述: 定义按钮的形状。可以是圆形、矩形或其他自定义形状。
常用值:

CircleShape: 圆形按钮。

RectangleShape: 矩形按钮。

RoundedCornerShape: 圆角矩形按钮。
示例:

arduino 复制代码

  import androidx.compose.ui.graphics.Shape
  import androidx.compose.ui.unit.dp
  import androidx.compose.foundation.shape.RoundedCornerShape

  Button(
      onClick = { /* 点击操作 */ },
      shape = RoundedCornerShape(8.dp)
  ) {
      Text("圆角按钮")
  }

border: BorderStroke?

描述: 为按钮添加边框。
参数:

width: 边框宽度。

color: 边框颜色。
示例:

arduino 复制代码

  import androidx.compose.ui.graphics.Color
  import androidx.compose.ui.unit.dp
  import androidx.compose.foundation.border

  Button(
      onClick = { /* 点击操作 */ },
      border = BorderStroke(2.dp, Color.Black)
  ) {
      Text("带边框按钮")
  }

modifier: Modifier

描述: 用于修改按钮的尺寸、位置、对齐方式等。
常用方法:
size(width, height): 设置按钮的固定宽高。

padding: 添加内边距。

fillMaxWidth, fillMaxHeight: 让按钮填充父容器的宽度或高度。
示例:

arduino 复制代码

  import androidx.compose.foundation.layout.size
  import androidx.compose.ui.unit.dp

  Button(
      onClick = { /* 点击操作 */ },
      modifier = Modifier.size(width = 200.dp, height = 50.dp)
  ) {
      Text("自定义大小按钮")
  }

elevation: ButtonElevation?

描述: 设置按钮的阴影效果，使其看起来有立体感。
示例:

less 复制代码

  import androidx.compose.material3.ButtonDefaults

  Button(
      onClick = { /* 点击操作 */ },
      elevation = ButtonDefaults.buttonElevation(defaultElevation = 4.dp)
  ) {
      Text("带阴影按钮")
  }

interactionSource: MutableInteractionSource

描述: 提供按钮的交互状态信息，可用于监听按钮的点击、悬停等交互事件。示例:

import 复制代码

  val interactionSource = remember { MutableInteractionSource() }

  Button(
      onClick = { /* 点击操作 */ },
      interactionSource = interactionSource
  ) {
      Text("交互按钮")
  }

Jetpack Compose 的 Button 组件通过丰富的属性，支持高度自定义。以下是一些常用的属性分类：基础属性: onClick, enabled 样式属性: colors, shape, border, elevation 尺寸与布局: modifier 高级属性: interactionSource