Jetpack:027-Jetpack中的Switch

文章目录

  • 1. 概念介绍
  • 2. 使用方法
  • 3. 代码与效果
    • 3.1 示例代码
    • 3.2 运行效果
  • 4. 内容总结

我们在上一章回中介绍了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

Jetpack:027-Jetpack中的Switch_第1张图片

4. 内容总结

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

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

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

你可能感兴趣的:(一起Talk,AndroidJetPack吧,移动开发,jetpack,compse,compose中的switch,compose中的滑动开关)