我正在尝试创建一个与Material3 Chip 页面顶部非常相似的 UI 。
看来最好的方法是构建一个LazyVerticalStaggeredGrid
由可组合项组成的内容FilteredChip
。
列中的单个 FilteredChip 显示得很好。但是当我将其包装在 LazyVerticalStaggeredGrid 中时,它会忽略文本大小限制并减小每个芯片的宽度,并给出非常大的高度。根据布局检查器,文本的宽度为 0dp,高度为 140dp。此外,它忽略了我的主题配色方案。
我期望它测量 Text 可组合项中的文本大小,并将其传递上去以确定每个块的宽度和每行的高度。如果 LazyGrids 的工作方式不是这样,我该如何处理这个问题?
这是一个非常简单的例子,可以说明我的问题:
@Composable
fun VerticalGrid(
contentList: List<String>,
modifier: Modifier = Modifier,
) {
LazyVerticalStaggeredGrid(
horizontalArrangement = Arrangement.spacedBy(16.dp),
columns = StaggeredGridCells.Adaptive(minSize = 4.dp),
verticalItemSpacing = 8.dp,
modifier = modifier.fillMaxSize()
) {
var selected = false
items(contentList) { text ->
Chip(text, selected, { selected = !selected }, modifier)
}
}
}
@Composable
fun Chip(
text: String,
selected: Boolean,
onClick: () -> (Unit),
modifier: Modifier = Modifier,
) {
FilterChip(
onClick = onClick,
label = { Text(text = text) },
selected = selected,
modifier = modifier
)
}
object Content {
val contentList = mutableListOf<String>()
init {
for (i in 10..50) {
contentList.add("Label$i")
}
}
}
@Preview(showBackground = true)
@Composable
fun ChipPreview1() {
StaggeredGridOfChipsTheme {
Column(
verticalArrangement = Arrangement.Top,
modifier = Modifier.fillMaxSize()
) {
Chip("Hello", true, {})
}
}
}
@Preview(showBackground = true)
@Composable
fun VerticalGridPreview1() {
StaggeredGridOfChipsTheme {
VerticalGrid(Content.contentList, Modifier.fillMaxSize())
}
}
任何能帮助我解决此问题的提示都会受到欢迎。