Jetpack：027-Jetpack中的Switch

我们在上一章回中介绍了Jetpack中Slider相关的内容，本章回中 主要介绍Switch。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的Switch是一种可以滑动的开关，它有两个状态值，通过滑动来切换不同的状态值。它主要是用来做为开关，打开和关闭某种状态。常见的使用场景：比如手机中设置静音和非静音状态。它的用法和Slider类似，因此我们在上一章回的基础上顺势介绍它。

2. 使用方法

在compose中使用可组合函数Switch来表示开关，该函数的常用的参数如下：

• checked参数：主要用来控制Switch打开/关闭状态；
• onCheckedChange参数：打开或者关闭时回调此函数，函数中的参数为开关的值；
• thumbContent参数：主要用来控制滑动的图标，可以不设置，使用默认的圆形图标；
• colors参数：主要用来设置边框、图标、轨迹(track)打开和关闭时的颜色；

上面这些参数中我们重点介绍checked参数，它需要使用一个状态值，然后在onCheckedChange参数中修改状态值，这样才能控制开关的状态。这么说可能比较抽象，我们将在后面小节中通过示例代码中演示它的使用方法。

Switch函数没有提供修改自身大小的参数，我尝试通过modifier参数修改它的大小，但是只能修改Switch占用的空间大小，无法修改图标，轨迹的大小，分析源代码后发现自身大小是一个固定值，目前我们无法修改它的大小，我感觉这种设计十分不友好，期待后续版本中能够提供相关的参数来修改Switch的大小。

3. 代码与效果

3.1 示例代码

var checked1 by remember { mutableStateOf(false) }

Switch(checked = checked1,
        onCheckedChange = { checked1 = it },
        colors = SwitchDefaults.colors(
            //switch最外层圆圈的颜色
            checkedBorderColor = Color.Red,
            //滑动轨道的颜色
            checkedTrackColor = Color.Yellow,
            //图标里层对号的颜色
            checkedIconColor = Color.Blue,
            //图标外层圆圈的颜色
            checkedThumbColor = Color.White,
            //这4个类型的颜色还对应unCheckedXXX，不设置时默认为灰色
        ),
        //如果选中后使用check图标：显示一个对号，否则显示默认图标：这个小圆点
        thumbContent = if(checked1){  {
            Icon(
                modifier = Modifier.size(SwitchDefaults.IconSize),
                imageVector = Icons.Default.Check,
                contentDescription = null )
        }
        }else{
            null
        }
)

我们在上面的示例代码中添加了详细的注释，这样有助于大家理解代码，代码中使用了状态值checked1来控制Switch的开关状态，然后在onCheckedChange参数中修改该状态值。

此外，我们在代码中还修改了Switch的风格，比如滑动块的图标，以及颜色。大家可以在后面的小节中从运行效果图中看到这些内容。

3.2 运行效果

编译并且运行上面的程序，可以得到下面的运行效果图。图中展示了处于不同状态下的Switch。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• Switch提供了打开和关闭两种状态；
• Switch主要用来控制某种状态的打开或者关闭；
• Switch提供了相关的参数来控制自己的状态和颜色；
• Switch没有提供修改自身大小的方法，目前无法修改它的大小；

看官们，与Jetpack中Switch相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！