Slide 9
Slide 9 text
@Composable
fun FliterChipEachRow(
chipList: List,
tempList: Set
) {
var multipleChecked by rememberSavable { mutableStateOf(tempList) }
FlowRow(… modifier/mainAxisSpacing/crossAxisSpacing等を設定する …) {
chipList.forEachIndexed { index, s ->
FilterChip(
selected = … multipleChecked内で判定する …,
onClick = { … multipleCheckedを増減させて見た目を切り替える … },
label = Text(text: s),
border = … 状態によって見た目を変更する …,
leadingIcon = … 状態によって見た目を変更する …,
shape = RoundedCornerShape(8.dp)
)
}
}
}
Category表示・TagCloud表示の様なChip表示
文字の長さに合わせて上手く折り返す様なChip表示をする場合を考えてみます
$IJQϑΟϧλʔαϯϓϧ
Android
FilterChipを利用する事で実現可能。
https://developer.android.com/develop/ui/compose/layouts/flow?hl=ja
※FilterChip & FlowRowを組み合わせて作る
✔︎
Chip1 Chip2
✔︎
Chip3
Chip4
✔︎
Chip5
https://developer.android.com/develop/ui/compose/components/chip?hl=ja
FilterChipの他にも様々な形でのChip表示が
純正Componentとして準備されています。
デザインに合わせたある程度のカスタマイズ
もする事ができます。