当创建一个Android应用程序时,我在一排卡片中放了一些可组合的东西,如下所示,它没有像我预期的那样工作.我放上"Weight(1f)"的Composable不再出现.

data class Test(
    val title: String,
    val text: String
)

@Composable
fun CardRowSample(
    modifier: Modifier = Modifier,
) {
    val testList =
        listOf(
            Test("AAAA", "1,2,3,4,5,6,7,8,9,10"),
            Test("BBBB", "11,12,13,14,15,16,17,18,19,20")
        )

    LazyColumn(
        modifier = modifier
    ) {
         items(
             items = testList
         ) {
             test ->
                Card(
                    elevation = 12.dp,
                    backgroundColor = Color.LightGray,
                    modifier = Modifier
                        .fillMaxWidth()
                        .heightIn(min = 50.dp)
                        .width(40.dp)
                        .requiredHeight(intrinsicSize = IntrinsicSize.Min)
                        .padding(
                            horizontal = 20.dp,
                            vertical = 20.dp
                        )
                        .border(
                            width = 1.dp,
                            color = Color.Black,
                            shape = RectangleShape
                        )
                ) {
                    Row(
                        modifier = Modifier.fillMaxWidth()
                    ) {

                        Icon(
                            modifier = Modifier
                                .padding(horizontal = 5.dp)
                                .align(Alignment.CenterVertically),
                            imageVector = Icons.Filled.Check,
                            contentDescription = null
                        )

                        Text(
                            text = test.title,
                            fontSize = 20.sp,
                            modifier =
                            Modifier
                                .width(120.dp)
                                .padding(horizontal = 10.dp, vertical = 10.dp)
                        )

                        Text(
                            text = test.text,
                            fontSize = 20.sp,
                            modifier = Modifier
                                .weight(1f)//it doesn't work!!
                                .padding(horizontal = 10.dp, vertical = 10.dp)
                        )
                    }
                }
        }
    }
}

enter image description here


My ideal image of the layout:

enter image description here


我写的代码参考了下面的问题,Weights in Jetpack compose,但我不明白为什么会发生这种情况.我给所有东西都加上了"Weight",并在Row的修改器中添加了填充ParentMaxSize,但我无法解决这个问题.

我下一步该怎么做才能解决这个问题?

推荐答案

问题不在于Modifier.weight(1f).这是因为Modifier.requiredHeight(IntrinsicSize.Min)

Card(
    elevation = 12.dp,
    backgroundColor = Color.LightGray,
    modifier = Modifier
        .fillMaxWidth()
        .heightIn(min = 50.dp)
//                    .width(40.dp)
//                    .requiredHeight(intrinsicSize = IntrinsicSize.Min)
        .padding(
            horizontal = 20.dp,
            vertical = 20.dp
        )
        .border(
            width = 1.dp,
            color = Color.Black,
            shape = RectangleShape
        )
) 

此外,Modifier.width(40.dp)也是多余的,因为在此之前还有另一个宽度修饰符Modifier.fillMaxWidth().

当带有固有大小修饰符的Modifier.RequisidIn时,行为很奇怪.Composable被测量两次,并具有无限约束

LAYOUT constraints: Constraints(minWidth = 0, maxWidth = 1080, minHeight = 0, maxHeight = Infinity), width: 1080, height: 235
LAYOUT constraints: Constraints(minWidth = 0, maxWidth = Infinity, minHeight = 235, maxHeight = 235), width: 510, height: 235

这是第二次测量宽度因maxWidth = Infinity而中断.我的设备是全宽的1080px

要查看约束和可组合的宽度和高度,可以使用

Card(
    elevation = 12.dp,
    backgroundColor = Color.LightGray,
    modifier = Modifier
        .fillMaxWidth()
        .heightIn(min = 50.dp)
//                    .width(40.dp)
                    .requiredHeight(intrinsicSize = IntrinsicSize.Min)
        .layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            println("LAYOUT constraints: $constraints, width: ${placeable.width}, height: ${placeable.height}")
            layout(placeable.width,placeable.height){
                placeable.placeRelative(0,0)
            }
        }
        .padding(
            horizontal = 20.dp,
            vertical = 20.dp
        )
        .border(
            width = 1.dp,
            color = Color.Black,
            shape = RectangleShape
        )
) 

Android相关问答推荐

ENV变量在gradle进程中没有更新

从单元测试访问RES/RAW文件

Jetpack创作动画断断续续变化的观点

从未设置实时数据值

Android App Google AdMob";广告加载失败:3;带有测试ID,&q;广告加载失败:1 for My Gahad

Jetpack编写错误(java.lang.NoSuchMethodError:无接口方法startRestartGroup)

为什么柱子的高度不都一样?

Camera2 将图像从 ImageReader 传递到 MediaRecorder

当 EditText 用于在 android studio 中将字符串发送到 firebase 时,仅允许安全调用错误

需要在按钮 onclick 上从 string.xml 获取值. @Composable 调用只能在@Composable 函数的上下文中发生

列语义在列中的第一个元素之后读取

在 react native 中设置 react-native-paper 组件的样式

服务似乎在启动时忽略传递的变量

无法找到方法 ''java.io.File > org.jetbrains.kotlin.gradle.tasks.KotlinCompile.getDestinationDir()

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

如何在组件之间导航

MediumTopAppBar Material3 只更改大标题

记住或不记得derivedStateOf

CenterAlignedTopAppBar 滚动行为:未为参数状态传递值

如何在stroke android drawable中设置渐变