iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0

在寫 UI 的時候,除了顯示內容給使用者看的元件以外,接收使用者輸入的表單元件也很常見。在前面的筆記裡,已經整理過如 TextFielButton 等表單元件,今天的耕讀筆記,要再研究幾個常用的表單元件。

RadioButton 元件

在設計表單時,若提供多個選項給使用者,但要限制只能選擇一個選項時,就可以使用 RadioButton 元件。Compose 的 RadioButton 元件設計只包括外顯的「圓圈」UI、元件是否被選擇的狀態以及 onClick 事件,若要在選項旁邊放置文字說明,則要自行用 Text 實作。

val options = listOf("A", "B", "C")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(options[1]) }

Column {
    options.forEach { text ->
        Row {
            RadioButton(
                selected = (text == selectedOption),
                onClick = { onOptionSelected(text) }
            )
            Text(
                text = text,
            )
        }
    }
}

在上面的例子裡,先宣告了一個 List 存放 ABC 三個選項,再用這個 List 去產生 RadioButtonText 的組合,被使用者選取的選項會被紀錄在 selectedOption 裡。當 RadioButton 被點擊時,就會以該元件的選項更新 selectedOption 的值。

Checkbox 元件

若表單裡的多個選項可以多選時,可以改用 Checkbox 達成。Checkbox 的參數與 RadioButton 類似,只是把 selected 改成 checked、把 onClick 改成 onCheckedChange。另外,為了紀錄哪些選項被勾選,範例裡使用一個 Map 結構來紀錄:

val checkedState = remember { mutableStateMapOf("A" to false, "B" to false, "C" to false) }

Column {
    checkedState.forEach { (key, value) ->
        Row {
            Checkbox(
                checked = value,
                onCheckedChange = { checkedState[key] = it },
            )
            Text(
                text = key,
            )
        }
    }
}

假如想要修改 Checkbox 被勾選時的顏色,元件參數裡也有 colors 可以調整,傳入一個實作 CheckboxColors 介面的類別,比方說 CheckboxDefaults 就可以從預設樣式裡去做微調:

Checkbox(
    checked = false,
    onCheckedChange = { /* ... */ },
    colors = CheckboxDefaults.colors(
        checkedColor = Color(0xFF0079D3)
    )
)

Switch 元件

在 Mobile 上出現 Switch 元件後,這種開關設計在 Desktop UI 上也開始流行起來,尤其特別常被拿來做「設定頁面」的選項開關,Compose for Desktop 也把這個元件移值過來了。

val checkedState = remember { mutableStateOf(false) }

Column {
    Switch(
        checked = checkedState.value,
        onCheckedChange = { checkedState.value = it }
    )
    Text(
        text = if (checkedState.value) "On" else "Off"
    )
}

其實 Switch 跟單個 Checkbox 元件非常類似,只要傳入 checked 參數並註冊 onCheckedChange 事件即可。在上面的例子裡,加了一個 Text 元件,依據當下的開關狀態顯示 OnOff 字樣。

Slider 元件

Slider 透過拖曳點在線上的位置來呈現數值,也是在做 UI 時很常用的元件,使用時傳入 value 參數及註冊 onValueChange 事件即可。

var sliderPosition by remember { mutableStateOf(0f) }

Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
)
Text(text = ceil(sliderPosition * 100).toInt().toString())

在上面的例子裡,加了一個 Text 元件,方便呈現 Slider 元件裡實際的數值(為求呈現區間為 1 至 100,先乘上 100 後無條件進位)。

參考資料


上一篇
第 13 天:常用 UI 元件之 Button
下一篇
第 15 天:排版元件之 Column、Row
系列文
傳教士的 Compose for Desktop 耕讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言