Compose 中的 Switch

在 Jetpack Compose 中，Switch 是一个用于表示开关状态的组件，通常用于启用或禁用某些设置或功能。Switch 可以方便地用于各种布尔类型的操作，通过简单的滑动手势来切换状态。

基本用法

示例代码

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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

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

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = if (isChecked) "Switch is ON" else "Switch is OFF")
        Spacer(modifier = Modifier.height(8.dp))
        Switch(
            checked = isChecked,
            onCheckedChange = { isChecked = it }
        )
    }
}

详细讲解

1. 状态管理：

   var isChecked by remember { mutableStateOf(false) }
   

   使用 remember 和 mutableStateOf 创建一个布尔类型的状态来管理 Switch 的选中状态。

2. 布局：

   Column(
       modifier = Modifier
           .fillMaxSize()
           .padding(16.dp),
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally
   )
   

   使用 Column 布局来垂直排列组件，并将其居中对齐。

3. Switch：

   Switch(
       checked = isChecked,
       onCheckedChange = { isChecked = it }
   )
   

   使用 Switch 组件来创建开关。checked 参数设置开关的当前状态，onCheckedChange 参数处理开关状态的变化。

自定义 Switch

除了基本的 Switch，Compose 还允许对 Switch 进行自定义，例如改变颜色、形状等。

自定义 Switch 示例代码

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

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = if (isChecked) "Switch is ON" else "Switch is OFF")
        Spacer(modifier = Modifier.height(8.dp))
        Switch(
            checked = isChecked,
            onCheckedChange = { isChecked = it },
            colors = SwitchDefaults.colors(
                checkedThumbColor = MaterialTheme.colorScheme.primary,
                uncheckedThumbColor = MaterialTheme.colorScheme.onSurface,
                checkedTrackColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.54f),
                uncheckedTrackColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.54f)
            )
        )
    }
}

详细讲解

1. 自定义颜色：

   colors = SwitchDefaults.colors(
       checkedThumbColor = MaterialTheme.colorScheme.primary,
       uncheckedThumbColor = MaterialTheme.colorScheme.onSurface,
       checkedTrackColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.54f),
       uncheckedTrackColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.54f)
   )
   

   使用 SwitchDefaults.colors 方法来自定义 Switch 的颜色。checkedThumbColor 设置选中状态下的滑块颜色，uncheckedThumbColor 设置未选中状态下的滑块颜色，checkedTrackColor 设置选中状态下的轨道颜色，uncheckedTrackColor 设置未选中状态下的轨道颜色。

带标签的 Switch

在实际应用中，Switch 通常与标签一起使用，以便用户更容易理解其功能。

带标签的 Switch 示例代码

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

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "Enable feature")
            Spacer(modifier = Modifier.width(8.dp))
            Switch(
                checked = isChecked,
                onCheckedChange = { isChecked = it }
            )
        }
    }
}

详细讲解

1. Row 布局：

   Row(
       verticalAlignment = Alignment.CenterVertically
   )
   

   使用 Row 布局来水平排列组件，并将其垂直居中对齐。

通过这些示例，你可以看到在 Jetpack Compose 中使用 Switch 是非常直观和灵活的。无论是基本使用、自定义样式，还是与标签一起使用，都可以轻松实现。