在Jetpack Compose中与VerticalScroll结合使用时，Fill MaxSize修饰符不起作用 [英] fillMaxSize modifier not working when combined with VerticalScroll in Jetpack Compose

问题描述

我试着查了一下，但找不到任何相关的东西。

我想在可垂直滚动的Box内放置&Full Size&Column，但这种组合似乎行不通。将verticalScroll(rememberScrollState())修饰符添加到Box时，似乎禁用了Column

的fillMaxSize()修饰符

以下代码未按预期工作：

MyTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .border(2.dp, Color.Green) //for visual effect only
                .verticalScroll(rememberScrollState())
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(2.dp)
                    .border(2.dp, Color.Red) //for visual effect only
            ) {
               //some content
            }
        }
}

预期结果：Box和Column(绿色和红色边框)填满整个屏幕。

实际结果：Box填满屏幕，但Column不填高

但是，如果我从Box中删除verticalScroll()修饰符，我会得到预期的结果：

MyTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .border(2.dp, Color.Green) //for visual effect only
                //verticalScroll modifier removed
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(2.dp)
                    .border(2.dp, Color.Red) //for visual effect only
            ) {
               //some content
            }
        }
}

推荐答案

verticalScroll包装内容的高度，可以拉伸到很长，所以作用域有Constraints.InfinityformaxHeight约束。

发件人fillMaxHeightdocumentation

如果传入的最大高度为Constraints.Infinity，则此修饰符将不起作用。

这就是您需要显式设置height的原因。

考虑切换到LazyColumn(出于此目的而使用fillParentMaxHeight())或切换到Pager(这是专门针对此类情况制定的)。

还有，就像@AdrianK指针一样，使用常规的scrollable可以用BoxWithConstraints包装您的视图，并使用maxHeight设置您的视图的height。

BoxWithConstraints {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .border(2.dp, Color.Green)
            .verticalScroll(rememberScrollState())
    ) {
        Column {
            repeat(2) {
                Column(
                    modifier = Modifier
                        // fillMaxWidth instead of fillMaxSize
                        .fillMaxWidth()
                        // explicit height modifier
                        .height([e-mail])
                        .padding(2.dp)
                        .border(2.dp, Color.Red)
                ) {
                    //some content
                }
            }
        }
    }
}

结果：

这篇关于在Jetpack Compose中与VerticalScroll结合使用时，Fill MaxSize修饰符不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！