android 在Jetpack合成中与VerticalScroll结合使用时,fillMaxSize修改器不起作用

llmtgqce  于 2023-06-04  发布在  Android
关注(0)|答案(4)|浏览(190)

我试着查了一下,但找不到任何相关的东西。
我想有一个“全尺寸”的Column内垂直滚动Box和这种组合似乎只是不工作。当我将verticalScroll(rememberScrollState())修饰符添加到Box时,似乎“禁用”了ColumnfillMaxSize()修饰符
下面的代码没有像预期的那样工作:

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
            }
        }
}

预期结果:BoxColumn(绿色边框和红边框)均填满整个屏幕。
实际结果: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
            }
        }
}

yk9xbfzb

yk9xbfzb1#

verticalScroll Package 了内容的高度,并且可以拉伸到很长,因此范围具有Constraints.Infinity for maxHeight约束。
来自fillMaxHeight文档
如果传入的最大高度为Constraints.Infinity,则此修改器将不起作用。
这就是为什么需要显式地设置height
考虑切换到LazyColumn(它有fillParentMaxHeight()用于此确切目的)或Pager(这是为这种情况显式设置的)。
此外,当@AdrianK指针伸出时,使用常规的scrollable,您可以使用BoxWithConstraints Package 视图,并使用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(this@BoxWithConstraints.maxHeight)
                        .padding(2.dp)
                        .border(2.dp, Color.Red)
                ) {
                    //some content
                }
            }
        }
    }
}

结果:

pftdvrlh

pftdvrlh2#

你可以将你的布局 Package 成一个BoxWithConstraints,它是不可滚动的,并从那里获取大小:

BoxWithConstraints {
    val pageSize = this.maxHeight // already provided as Dp value
    Box(
        modifier = Modifier
            .fillMaxSize()
            .border(2.dp, Color.Green) //for visual effect only
            .verticalScroll(rememberScrollState())
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .height(pageSize)
                .padding(2.dp)
                .border(2.dp, Color.Red) //for visual effect only
        ) {
            //some content
        }
        // just so we can scroll a bit further
        Spacer(modifier = Modifier.padding(top = pageSize).fillMaxWidth().height(72.dp))
    }
}
h7appiyu

h7appiyu3#

BoxWithConstraints的解决方案为我指出了一个工作解决方案(在我的情况下)。
我将列 Package 在一个maxsizedBoxWithConstraints中。然后我将Column的高度设置为Modifier.heightIn(min=maxHeight)。这样,列至少为“maxHeight”高。

BoxWithConstraints(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Column(
            modifier = Modifier
                .heightIn(min = maxHeight)
                .verticalScroll(rememberScrollState())
        ) {
            Spacer(modifier = Modifier.weight(1f)
            Text(text="This is at the bottom")
        }
    }
goqiplq2

goqiplq24#

我知道很晚了,但这似乎对我很有效。

Modifier.verticalScroll(scrollState).height(IntrinsicSize.Max)

这将高度扩展到其最大固有大小,并且可以垂直滚动。

相关问题