唯客微博客

专注于计算机,嵌入式领域的技术

0%

Jetpack Compose组件-小标签(Chip)

Jetpack Compose组件-小标签(Chip)

小标签(Chip)

Chip(小标签)类似于淘宝的历史搜索标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@ExperimentalMaterialApi
@Composable
fun Chip(
// 点击回调
onClick: () -> Unit,
// 修饰符
modifier: Modifier = Modifier,
// 小标签使能
enabled: Boolean = true,
// 点击状态源
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
// 小标签形状
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
// 小标签边框
border: BorderStroke? = null,
// 小标签的各种颜色
colors: ChipColors = ChipDefaults.chipColors(),
// 小标签左侧图标
leadingIcon: (@Composable () -> Unit)? = null,
content: @Composable RowScope.() -> Unit
): Unit
1
2
3
4
5
6
7
8
9
10
11
12
13
Chip(
onClick = { /* Do something! */ },
border = ChipDefaults.outlinedBorder,
colors = ChipDefaults.outlinedChipColors(),
leadingIcon = {
Icon(
Icons.Filled.Settings,
contentDescription = "Localized description"
)
}
) {
Text("Change settings")
}

可以选中的小标签(FilterChip)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@ExperimentalMaterialApi
@Composable
fun FilterChip(
// 是否选中
selected: Boolean,
// 点击回调
onClick: () -> Unit,
// 修饰符
modifier: Modifier = Modifier,
// 小标签使能
enabled: Boolean = true,
// 点击状态源
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
// 小标签形状
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
// 小标签边框
border: BorderStroke? = null,
// 小标签的各种颜色
colors: SelectableChipColors = ChipDefaults.filterChipColors(),
// 小标签左侧图标
leadingIcon: (@Composable () -> Unit)? = null,
// 小标签选中图标
selectedIcon: (@Composable () -> Unit)? = null,
// 小标签右侧图标
trailingIcon: (@Composable () -> Unit)? = null,
content: @Composable RowScope.() -> Unit
): Unit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
val state = remember { mutableStateOf(false) }
FilterChip(
selected = state.value,
onClick = { state.value = !state.value },
leadingIcon = {
Icon(
imageVector = Icons.Filled.Home,
contentDescription = "Localized description",
modifier = Modifier.requiredSize(ChipDefaults.LeadingIconSize)
)
},
selectedIcon = {
Icon(
imageVector = Icons.Filled.Done,
contentDescription = "Localized Description",
modifier = Modifier.requiredSize(ChipDefaults.SelectedIconSize)
)
}
) {
Text("Filter chip")
}
-------------本文结束感谢您的阅读-------------

本文标题:Jetpack Compose组件-小标签(Chip)

文章作者:Vinx

发布时间:2023年01月13日 - 08:43

最后更新:2023年09月18日 - 11:41

原始链接:https://blog.vinkvin.com/post/64/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。