我想把一个LazyRow加到一个没有指定宽度的Column上.(通常我只做.fillMaxWidth(),但我希望宽度取决于内容)

enter image description here

问题是它增加了列的宽度.

@Composable
fun Test() {
    val items = listOf("Item 1", "Item 2", "Item 3", "Item 4")
    
    Column(
        modifier = Modifier.background(Color.Yellow)
    ) {
        Text("Title", style = MaterialTheme.typography.titleLarge)
        LazyRow {
            items(items){
                Text(text = it)
            }
        }
    }
}

@Preview
@Composable
fun TestPreview() {
    Test()
}

如果没有LazyRow,有没有可能得到Column的宽度?

编辑:类似于DropdownMenu中的Slider

long slider

short slider

items

@Composable
fun Test() {
    val items = listOf("Item 1", "Item 2", "Item 3", "Item 4")
    var expanded by remember {
        mutableStateOf(false)
    }

    Box {
        Button(onClick = { expanded = true}) {
            Text(text = "Open dropdown")
        }

        DropdownMenu(
            modifier = Modifier
                .heightIn(max = 200.dp),
            expanded = expanded,
            onDismissRequest = { expanded = false })
        {
            Column {
                Text("Short text", style = MaterialTheme.typography.titleLarge)
                Slider(value = 0.5f, onValueChange = {})
                Row(
                    modifier = Modifier.horizontalScroll(rememberScrollState())
                ) {
                    items.forEach {
                        Text(text = it)
                    }
                }
            }
        }
    }
}

推荐答案

您可以为您的宽度赋予一个静态值,然后惰性行将被放置在给定的宽度内.如果它应该动态工作,请try 使用下面的方法.

@Composable
fun AlignTextAndLazyRow() {
Column(modifier = Modifier.wrapContentSize()
    .background(Color.Gray) //to check container size
) {

    Layout(content = {
        Text(text = "Your text here", Modifier.layoutId("text"))
        LazyRow(
            modifier = Modifier.wrapContentWidth().layoutId("row")
        ) {
            items(10) {
                Text(text = "Hello")
            }
        }
    }, measurePolicy = { measurables, constraints ->
        val textPlaceable = measurables.first { it.layoutId == "text" }.measure(constraints)

        val rowPlaceable = measurables.first { it.layoutId == "row" }.measure(
            constraints.copy(maxWidth = textPlaceable.width)
        )
        val offset = 10 //min offset

        val containerWidth = textPlaceable.width
        val height = textPlaceable.height + rowPlaceable.height + offset

        layout(containerWidth, height) {
            rowPlaceable.placeRelative(0, textPlaceable.height + offset)
            textPlaceable.placeRelative(0, 0)
        }
    })
}
}

Android相关问答推荐

使用Kotlin的SD卡

编写Landscape BoxWithRequests具有错误的高度.(aspectRatio matchHeight约束第一次未按预期工作)

处理Room数据库中的嵌套实体

Kotlin DSL:为什么我可以从Play Store获取发布版本的日志(log)?

Jetapck Compose:将Compose BOM更新为最新版本&2024.01.00&Quot;CircularProgressIndicator后出现错误

Yarn 机器人导致活动未找到,但Gradlew Run工作正常

穿戴与iPhone连接的安卓操作系统

如何在初始合成期间在可组合函数中调用/获取远程API中的数据[防止无限重组]

插入视图模型时,dagger 未命中绑定错误

Android 导航 - 定义参数

如何在jetpack compose中使可组合的屏幕zoom 到不同的手机(屏幕)尺寸?

请求访问小部件中的位置权限

我可以从 Android 中的选定文本中获取周围的文本吗?

在 MVVM Jetpack Compose 上添加依赖项时出现重复类错误

Kotlin Multiplatform Mobile targetSdk 已弃用

如何将可重用的 ExtendedFloatingActionButton 与可重用的脚手架链接起来

如何在 Jetpack Compose 中设置行宽等于 TextField 的宽度?

将应用更改为暗模式后 Android MainActivity 数据泄漏

如何将房间数据库导出到 .CSV

如何使用 recyclerview 实现这样的布局?