盒子未填充最大尺寸 - Jetpack Compose

Question

PersonalDataBox()即使有，我的也没有填满最大可用空间.fillMaxSize()

我的盒子和屏幕底部之间有一个空白区域。我想用 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

我拉下了你的代码，它实际上在整个屏幕上渲染得很好——所以我假设你PersonalDatabox在一个具有无限高度的撰写视图中，例如LazyColumn.

在此处查看有关约束的文档

具体来说：

最常见的是，当使用无界约束进行测量时，这些子项将回退到自身大小以包装其内容，而不是扩展以填充可用空间（这并不总是正确的，因为它取决于子级布局模型，但这是一种常见行为核心布局组件）。

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

为了解决这个问题，您可以使用fillParentMaxHeight使约束等于惰性列的高度。

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

下面是一个示例。

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