框未填满最大尺寸 - Jetpack Compose

Question

即使有 .fillMaxSize()

，我的 PersonalDataBox() 也没有填满可用的最大值 space

我的框和屏幕底部之间有一个空白 space。我想用 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)
            }
        }
    }
}

Answer 1

您的盒子具有以下修饰符：

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)

有两个填充修饰符在您的 Box 的顶部和底部添加了总共 25.dp 个填充，删除它们应该可以解决您的问题

Answer 2

我下载了你的代码，它实际上在整个屏幕上呈现得很好——所以我假设你的 PersonalDatabox 在具有无限高度的组合视图中，例如 LazyColumn .

查看有关约束的文档here

具体来说：

Most commonly, when measured with unbounded Constraints, these children will fallback to size themselves to wrap their content, instead of expanding to fill the available space (this is not always true as it depends on the child layout model, but is a common behavior for core layout components).

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

为了解决这个问题，您可以使用 fillParentMaxHeight.

使约束等于惰性列的高度

不过，这仅在您使用 LazyColumn 时有效。否则，如果您专门设置高度或测量屏幕，您可以完成同样的事情。

这是一个可能看起来像的例子。

LazyColumn() {
            item {
                Column(modifier = Modifier.fillParentMaxHeight(1f)) {
                    PersonalDataBox(User(name = "John", surname = "Robless", "coolemail@email.com"))
                }
            }
        }

框未填满最大尺寸 - Jetpack Compose

Box doesn't fill max size - Jetpack Compose

android

android-jetpack

android-jetpack-compose