在寫 UI 的時候,除了顯示內容給使用者看的元件以外,接收使用者輸入的表單元件也很常見。在前面的筆記裡,已經整理過如 TextFiel
、Button
等表單元件,今天的耕讀筆記,要再研究幾個常用的表單元件。
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
存放 A
、B
、C
三個選項,再用這個 List
去產生 RadioButton
及 Text
的組合,被使用者選取的選項會被紀錄在 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
元件,依據當下的開關狀態顯示 On
或 Off
字樣。
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 後無條件進位)。