快捷導(dǎo)航

Jetpack Compose之選擇器使用實(shí)例講解

更新時(shí)間：2023年04月17日 09:38:18 作者：海塔燈

這篇文章主要介紹了Jetpack Compose之選擇器使用，選擇器主要是指Checkbox復(fù)選框，單選開關(guān)Switch,滑桿組件Slider等用于提供給用戶選擇一些值和程序交互的組件，比如像復(fù)選框Checkbox，可以讓用戶選擇一個(gè)或者多個(gè)選項(xiàng)

選擇器是啥

選擇器主要是指Checkbox復(fù)選框，單選開關(guān)Switch,滑桿組件Slider等用于提供給用戶選擇一些值和程序交互的組件，比如像復(fù)選框Checkbox，可以讓用戶選擇一個(gè)或者多個(gè)選項(xiàng)，它可以將一個(gè)選項(xiàng)打開或者是關(guān)閉，通常用來做線上調(diào)查問卷或者是模擬考試的場景程序中，再比如滑桿組件可以用來作為調(diào)節(jié)音量和亮度的數(shù)值調(diào)整，或者是做進(jìn)度條。

實(shí)例解析

1.Checkbox復(fù)選框

Checkbox允許用戶從一個(gè)集合中選擇一個(gè)或者多個(gè)選項(xiàng)，而且它可以將一個(gè)選項(xiàng)打開或者是關(guān)閉，下列是Checkbox的參數(shù)列表

@Composable
fun Checkbox(
    checked: Boolean, // 是否被選中
    onCheckedChange: ((Boolean) -> Unit)?, // 當(dāng)復(fù)選框被點(diǎn)擊時(shí)的回調(diào)
    modifier: Modifier = Modifier,
    enabled: Boolean = true, // 是否啟用復(fù)選框
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: CheckboxColors = CheckboxDefaults.colors() // 復(fù)選框的演示組
)

我們可以通過下面的代碼了解Checkbox的使用方法

  @Composable
    fun CheckBoxDemo()
    {
        val checkedState = remember {
            mutableStateOf(true)
        }
        Checkbox(checked = checkedState.value, onCheckedChange = {
            checkedState.value = it
        },
        colors = CheckboxDefaults.colors(checkedColor = Color(0xFF0079D3)))
    }

運(yùn)行結(jié)果：

2.TriStateCheckbox三狀態(tài)選擇框

當(dāng)我們的復(fù)選框有很多個(gè)的時(shí)候，往往希望能夠統(tǒng)一選擇或者時(shí)取消，這種場景下我們就可以使用TriStateCheckbox ，代碼如下：

    @Composable
    fun TriStateCheckBoxDemo()
    {
        val(state,onStateChange) = remember {
            mutableStateOf(true)
        }
        val(state2,onStateChange2) = remember {
            mutableStateOf(true)
        }
        val parentState = remember(state, state2) {
            if(state && state2) ToggleableState.On
            else if(!state && !state2) ToggleableState.Off
            else ToggleableState.Indeterminate
        }
        val onParentClick = {
            val s = parentState != ToggleableState.On
            onStateChange(s)
            onStateChange2(s)
        }
        Column(modifier = Modifier.padding(10.dp,0.dp,0.dp,0.dp)) {
            TriStateCheckbox(state = parentState, onClick = onParentClick,
                colors = CheckboxDefaults.colors(checkedColor = MaterialTheme.colors.primary)
            )
            Checkbox(checked = state, onCheckedChange = onStateChange)
            Checkbox(checked = state2, onCheckedChange = onStateChange2)
        }
    }

運(yùn)行結(jié)果如下。

當(dāng)復(fù)選框全選中時(shí)，TriStateCheckbox顯示已完成的狀態(tài)，而如果只有部分復(fù)選框被選中時(shí)，TriStateCheckbox則顯示不確定狀態(tài)，當(dāng)我們在這個(gè)時(shí)候點(diǎn)擊它時(shí)，則會將剩余沒有選中的復(fù)選框設(shè)置為選中狀態(tài)，當(dāng)我們?nèi)サ羲羞x中狀態(tài)時(shí)，TriStateCheckbox的狀態(tài)也被置成了未選中的狀態(tài)。

3.Switch單選開關(guān)

Switch組件可以控制單個(gè)項(xiàng)關(guān)閉或者是開啟，參數(shù)列表如下

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun Switch(
    checked: Boolean, // 開關(guān)的狀態(tài)
    onCheckedChange: ((Boolean) -> Unit)?, 點(diǎn)擊開關(guān)的回調(diào)，會獲得最新的開關(guān)狀態(tài)
    modifier: Modifier = Modifier,
    enabled: Boolean = true, // 是否啟用
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SwitchColors = SwitchDefaults.colors() // 開關(guān)組的顏色。
)

Switch組件的使用也特別簡單，代碼如下：

  @Composable
    fun SwitchDemo()
    {
        val checkedState = remember {
            mutableStateOf(true)
        }
        Switch(checked = checkedState.value, onCheckedChange = {
            checkedState.value = it
        })
    }

運(yùn)行結(jié)果：

4.Slider滑桿組件

slider組件類似于傳統(tǒng)視圖的SeekBar,可以用來做音量，亮度之類的數(shù)值調(diào)整或者是進(jìn)度條，我們先看看它的參數(shù)列表

@Composable
fun Slider(
    value: Float, // 進(jìn)度值
    onValueChange: (Float) -> Unit, // 進(jìn)度改變的監(jiān)聽
    modifier: Modifier = Modifier, // 修飾符
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f, // 進(jìn)度值的范圍默認(rèn)是0到1
    /*@IntRange(from = 0)*/
    steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SliderColors = SliderDefaults.colors() // 滑桿顏色設(shè)置，默認(rèn)值是SliderDefaults.colors
)

其中，colors參數(shù)是用于設(shè)置滑桿各部位的顏色?；瑮U組件中可設(shè)置顏色的區(qū)域很多，例如滑桿小圓球的顏色，滑桿進(jìn)度條顏色，滑桿底色等，step參數(shù)將進(jìn)度條平分為（step+1）段，比如當(dāng)分成兩段時(shí)，進(jìn)度條在第一段之間拉動，超過第一段的一半就自動到第一段，沒超過就退回到原來的位置，Sliderbar的使用代碼如下。

    @Composable
    fun SliderDemo()
    {
        var sliderPosition by remember {
            mutableStateOf(0f)
        }
        Text(text = "%.1f".format(sliderPosition*100) + "%")
        Slider(value = sliderPosition, onValueChange = {sliderPosition = it})
    }

運(yùn)行結(jié)果如下