Jetpack Compose：框未填满最大尺寸

Question

即使使用.fillMaxSize()，我的PersonalDataBox()也不能填充最大的可用空间。

我的框和屏幕底部之间有一段空白。 我想用Box()填满整个屏幕。看起来我的框似乎使用了.fillWrapHeight()。该框的父级也使用了.fillMaxSize()并且工作正常 - 填充了最大高度。

@Composable
private fun PersonalDataBox(user: User) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(vertical = 10.dp)
            .clip(RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp))
            .background(Color.Red)
            .padding(horizontal = 25.dp, vertical = 15.dp)
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            Text(
                text = stringResource(R.string.personal_data),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 10.dp),
                fontSize = 16.sp,
                fontWeight = FontWeight.SemiBold,
                color = MaterialTheme.colors.primary
            )
            listOf(
                Pair(stringResource(R.string.name), user.name),
                Pair(stringResource(R.string.surname), user.surname),
                Pair(stringResource(R.string.e_mail), user.email),
            ).forEach {
                InputField(it)
            }
        }
    }
}

- Wafi_ck

Answer 1

我拉取了你的代码，它在整个屏幕上完美地渲染出来--所以我认为你将PersonalDatabox放在一个高度无限的组合视图中，例如LazyColumn。

查看有关约束条件的文档此处

具体来说:

通常情况下，当使用未限制的约束条件进行测量时，这些子项将回退到调整其大小以包裹内容，而不是扩展到填充可用空间（这不总是正确的，因为它取决于子布局模型，但对于核心布局组件而言，这是一种常见的行为）。

换句话说，如果约束条件是无限的，那么.fillMaxSize将默认为包裹内容。

要解决这个问题，您可以使用fillParentMaxHeight使约束条件等于Lazy Column的高度。

不过，这只适用于使用LazyColumn的情况。否则，如果您特定设置高度或测量屏幕，也可以实现相同的效果。

以下是一个可能看起来像这样的示例：

LazyColumn() {
            item {
                Column(modifier = Modifier.fillParentMaxHeight(1f)) {
                    PersonalDataBox(User(name = "John", surname = "Robless", "[e-mail]"))
                }
            }
        }

- DWndrer

---

我的PersonalDataBox被放置在Column()中的另一个Box()中。Column具有.verticalScroll()，当我注释掉那一行时，我的盒子填满了最大高度。谢谢。 - Wafi_ck

我使用了 Modifier.matchParentSize()。效果非常好。 - nilsi

Answer 2

您的Box有以下修饰符：

modifier = Modifier
            .fillMaxSize()
            .padding(vertical = 10.dp)
            .clip(RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp))
            .background(Color.Red)
            .padding(horizontal = 25.dp, vertical = 15.dp)

重要的是：

.padding(vertical = 10.dp)
.padding(horizontal = 25.dp, vertical = 15.dp)

有两个填充修饰符，将总共25.dp的填充添加到Box的顶部和底部，移除它们，这样就可以解决您的问题。

- Scott Cooper