Compose 中的 Checkbox

在 Jetpack Compose 中，Checkbox 是用于显示和控制布尔状态的复选框组件。复选框在用户界面中很常见，尤其是在表单中，用于选择多个选项。

Checkbox 的基本用法

Checkbox 组件主要有两个状态：选中（checked）和未选中（unchecked）。它通常与一个布尔状态变量绑定，当用户点击复选框时，这个变量的值会改变。

常用参数

• checked: 布尔值，表示复选框当前的选中状态。
• onCheckedChange: 回调函数，当复选框状态变化时触发。
• modifier: 用于设置复选框的修饰符，例如尺寸、边距等。
• enabled: 布尔值，表示复选框是否可用。

示例代码

下面是一个基本的示例代码，展示如何在 Jetpack Compose 中使用 Checkbox：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.checkboxexample.ui.theme.CheckboxExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CheckboxExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CheckboxExample()
                }
            }
        }
    }
}

@Composable
fun CheckboxExample() {
    var isChecked by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Checkbox Example")

        Spacer(modifier = Modifier.height(8.dp))

        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Checkbox(
                checked = isChecked,
                onCheckedChange = { isChecked = it },
                modifier = Modifier.padding(end = 8.dp)
            )
            Text(text = if (isChecked) "Checked" else "Unchecked")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun CheckboxExamplePreview() {
    CheckboxExampleTheme {
        CheckboxExample()
    }
}

解释

1. 状态管理:

   • 使用 remember 和 mutableStateOf 来管理复选框的状态。isChecked 是一个布尔变量，表示复选框当前是否被选中。

2. 布局:

   • 使用 Column 和 Row 布局将复选框和文本水平排列，并在页面中垂直居中。

3. Checkbox 组件:

   • Checkbox 组件的 checked 参数绑定到 isChecked 状态。
   • onCheckedChange 回调函数在复选框状态改变时更新 isChecked 的值。

4. UI:

   • Text 组件用于显示复选框当前的状态（选中或未选中）。
   • 使用 Spacer 添加控件之间的间距。

自定义样式

你还可以通过 colors 参数来自定义复选框的颜色：

Checkbox(
    checked = isChecked,
    onCheckedChange = { isChecked = it },
    colors = CheckboxDefaults.colors(
        checkedColor = Color.Green,
        uncheckedColor = Color.Red,
        checkmarkColor = Color.White
    ),
    modifier = Modifier.padding(end = 8.dp)
)

通过上述方式，你可以更改复选框在不同状态下的颜色，从而实现更个性化的设计。