kotlin JetpackCompose“Modifier.fillMaxHeight()”在Card中不起作用

xzv2uavs  于 2023-04-07  发布在  Kotlin
关注(0)|答案(1)|浏览(158)

我想在卡片视图中放置一条垂直线,所以我写了下面的代码,但效果不好。

@Composable
fun ListScreen(
    title: String
) {
    Column {
        Scaffold(
            topBar = {
                TopAppBar(title = { Text(title) })
            }
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                List()
            }
        }
    }
}

@Composable
fun List(
    modifier: Modifier = Modifier
) {

    val testList = listOf("test1", "test2")

    LazyColumn(
        modifier = modifier
    ) {
        items(
            items = testList
        ) { testText ->

            Card (
                elevation = 10.dp,
                modifier = modifier
                    .fillMaxSize() // It doesn't work.
                    .padding(
                        top = 30.dp,
                        start = 30.dp,
                        end = 30.dp,
                        bottom = 30.dp
                    )
                    .border(
                        width = 0.8.dp,
                        color = Color.DarkGray,
                        shape = RectangleShape
                    )
            ) {
                Row {
                    Text(
                        text = testText,
                        fontSize = 30.sp,
                        modifier =
                        Modifier
                            .padding(horizontal = 15.dp, vertical = 20.dp)
                            .weight(0.5f)
                    )

                    Divider(
                        modifier = Modifier
                            .fillMaxHeight() // <-  It doesn't work.
                            .width(0.5.dp),
                        color = Color.Black
                    )

                }

            }
        }
    }
}

我想象我的屏幕看起来像下面的图片,但实际上显示一个没有黄线。这意味着行中的分隔符不起作用。
我理想的应用形象:

为了解决这个问题,
1.我检查了修改器.width和height是否都工作正常。
我实际上指定了dp的高度和宽度,它工作得很好。
1.我尝试使用Modifier.onSizeChanged()。

var dividerHeight by remember { mutableStateOf(50.dp) }

Row {
       Text(
            text = testText,
            fontSize = 30.sp,
            modifier =
              Modifier
                  .padding(horizontal = 10.dp, vertical = 10.dp)
                  .weight(0.5f)
        )

        Divider(
            modifier = Modifier
                      .height(dividerHeight) // set a default value
                      .width(0.5.dp)
                      .onSizeChanged { dividerHeight = it.height.dp }, // added this line
            color = Color.DarkGray
       )
}

如上所示,这当然可以在一段时间内工作,但是当高度改变时,只有Divider的高度保持不变。此外,我尝试替换onSizeChanged { }和height(),但它抛出了以下错误。java.lang.IllegalArgumentException: Can't represent a size of 348160 in Constraints
下一步我该怎么做来解决这个问题?

sz81bmfz

sz81bmfz1#

注解行中.fillMaxSize().fillMaxHeight()都不工作的原因在文档中给出如下。

fillMaxSize

让内容填充maxWidth和Constraints.maxHeight,通过将最小宽度和最大宽度设置为等于最大宽度乘以分数,以及将最小高度和最大高度设置为等于最大高度乘以分数。注意,默认情况下,分数为1,因此修改器将使内容填充整个可用空间。如果传入的最大宽度或高度为Constraints.Infinity,则此修改器在该维度上将不起作用。

fillMaxHeight

通过将最小高度和最大高度设置为等于最大高度乘以分数,使内容填充(可能仅部分填充)传入测量约束的Constraints.maxHeight。请注意,默认情况下,分数为1,因此修改器将使内容填充整个可用高度。如果传入的最大高度为Constraints.Infinity,则此修改器将不起作用。
如果你注意到最后一行,
If the incoming maximum width or height is Constraints.Infinity this modifier will have no effect in that dimension
这意味着如果你使用像LazyColumn这样的Composable,它没有高度约束,因为它是可滚动的。它有Constraints.Infinity作为高度约束。当你指定使用fillMaxSize时,不可能给予无限高。所以它被忽略了。
fillMaxHeight的逻辑相同。
P.S:fillMaxSize确实起作用,如果你把它取下来,你会看到卡不再填满整个设备宽度。
那我们怎么解决这个问题
好吧,你必须给予一些高度限制。固定的或编程的。

相关问题