打造非凡：使用Compose轻松制作精美的iOS风格SwitchButton

2023-09-15 07:52:02

在这技术日新月异的时代，用户界面（UI）在构建引人入胜的应用程序中发挥着至关重要的作用。为了满足用户对直观性和美感的日益增长的需求，开发者必须掌握最新技术，创造出令人惊艳的交互体验。

SwitchButton作为一种广泛使用的UI元素，允许用户轻松切换选项或设置。为了满足iOS用户对视觉一致性的期望，Compose框架提供了强大且灵活的工具，用于创建原生风格的SwitchButton。在本文中，我们将深入探讨如何使用Compose仅用10行关键代码实现iOS风格的SwitchButton，支持点击和滑动拖拽。

10行代码，打造iOS风格的SwitchButton

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Checkbox
import androidx.compose.material.CheckboxDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun iOSSwitchButton(
    modifier: Modifier = Modifier,
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    label: String = "",
) {
    Row(
        modifier = modifier
            .padding(start = 20.dp, end = 20.dp)
            .height(50.dp)
            .background(color = Color.LightGray, shape = RoundedCornerShape(25.dp)),
        verticalAlignment = Alignment.CenterVertically
    ) {
        var toggleState by remember { mutableStateOf(checked) }
        Checkbox(
            modifier = Modifier.padding(end = 12.dp),
            checked = toggleState,
            onCheckedChange = {
                toggleState = it
                onCheckedChange(it)
            },
            colors = CheckboxDefaults.colors(
                checkedColor = Color.Blue,
                uncheckedColor = Color.Gray,
            ),
        )
        Text(
            text = label,
            style = TextStyle(
                color = Color.Black,
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold,
            ),
            modifier = Modifier.padding(end = 12.dp)
        )
    }
}