Jetpack Compose中的基本组件-按钮、单选、Switch

发表于 | 分类于
Jetpack Compose中基本组件及组件提取

前言

除了布局组件外，Jetpack Compose 还提供了一系列其他常用的 UI 组件。

组件

https://developer.android.google.cn/jetpack/compose/components?hl=zh-cn

入门教程

https://developer.android.google.cn/courses/pathways/compose?hl=zh-cn

按钮

基本使用

1
2
3
4
5
6
7
8
9
10
11
Button(
    modifier = Modifier.width(100.dp).height(40.dp),
    shape = MaterialTheme.shapes.medium,
    onClick = { /* 按钮点击事件 */ }
) {
    Text(
        text = "点击",
        fontSize = 16.sp,
        color = Color.White
    )
}

自定义按钮

效果

image-20240321233209257

组件定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ZBtnView(text:String){
    val mShape = RoundedCornerShape(6.dp)
    Box(
        modifier = Modifier
            .fillMaxSize()
            .clip(mShape)
    ) {
        Box(
            modifier = Modifier
                .padding(0.dp,6.dp,0.dp,0.dp)
                .fillMaxSize()
                .background(
                    Color(0xff2B89E0),
                    shape =mShape
                )
                .clip(mShape)
        )
        Box(
            modifier = Modifier
                .padding(0.dp,0.dp,0.dp,2.5.dp)
                .fillMaxSize()
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(
                            Color(0xff8AEFFD),
                            Color(0xff3BD9FD),
                            Color(0xff32C8FD),
                            Color(0xff36B3FE),
                            Color(0xff50B8FF),
                        ), // 定义垂直渐变色
                        startY = 0f,
                    ),
                    shape = mShape
                )
                .clip(mShape)
        )
        Text(
            text = text,
            color = Color.White,
            style = TextStyle(fontSize = 14.sp),
            textAlign = TextAlign.Center,
            modifier = Modifier
                .align(Alignment.Center)
                .wrapContentSize(Alignment.Center),
        )
    }
}

使用

1
2
3
4
5
6
7
8
Box(
    modifier = Modifier
        .align(Alignment.Bottom)
        .size(72.dp, 28.dp)
        .clip(RoundedCornerShape(6.dp))
        .clickable { }) {
    ZBtnView("安装")
}

背景色

  1. 推荐使用 ButtonDefaults.buttonColors：它会自动处理按钮的各种状态（按压、禁用等），且符合 Material Design 设计规范。
  2. containerColor 参数：在 Material3 中，containerColor 用于设置按钮的背景色（替代了 Material2 中的 backgroundColor）。
  3. 自定义背景时：需将 containerColor 设为 Color.Transparent 以清除默认背景，避免样式冲突。
  4. 形状一致性：自定义背景时建议使用 ButtonDefaults.shape 保持默认圆角，或通过 shape 参数指定自定义形状。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Button(
    modifier = Modifier
        .padding(top = 40.dp)
        .fillMaxWidth()
        .height(55.dp)
        .clip(CommonTheme.CornerFull),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0x55ffffff), // 默认状态
    ),
    onClick = {
        val intent = Intent(baseContext, MainActivity::class.java)
        intent.putExtra("name", "张三")
        startActivity(intent)
    }) {
    Text("立即登录", fontSize = 24.sp, color = Color(0xff253A70))
}

注意

通过background设置是不生效的。

单选按钮

1
2
3
4
5
6
7
8
@Composable
fun MyRadioBtn(onSelectChange: (Boolean) -> Unit) {
    val isSelected = remember {mutableStateOf(false)}
    RadioButton(selected = isSelected.value, onClick = {
        isSelected.value = !isSelected.value
        onSelectChange(isSelected.value)
    })
}

Switch

1
2
3
4
5
6
7
8
9
10
@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }
    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}