在Jetpack Compose中与VerticalScroll结合使用时,Fill MaxSize修饰符不起作用

fillMaxSize modifier not working when combined with VerticalScroll in Jetpack Compose(在Jetpack Compose中与VerticalScroll结合使用时,Fill MaxSize修饰符不起作用)
本文介绍了在Jetpack Compose中与VerticalScroll结合使用时,Fill MaxSize修饰符不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我想在可垂直滚动的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
            }
        }
}

预期结果: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
            }
        }
}

推荐答案

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(this@BoxWithConstraints.maxHeight)
                        .padding(2.dp)
                        .border(2.dp, Color.Red)
                ) {
                    //some content
                }
            }
        }
    }
}

结果:

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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to target newer versions in .gitlab-ci.yml using auto devops (java 11 instead of 8 and Android 31 instead of 29)(如何在.gitlab-ci.yml中使用自动开发工具(Java 11而不是8,Android 31而不是29)瞄准较新的版本)
Android + coreLibraryDesugaring: which Java 11 APIs can I expect to work?(Android+core LibraryDesugering:我可以期待哪些Java 11API能够工作?)
How to render something in an if statement React Native(如何在If语句中呈现某些内容Reaction Native)
How can I sync two flatList scroll position in react native(如何在本机Reaction中同步两个平面列表滚动位置)
Using Firebase Firestore in offline only mode(在仅脱机模式下使用Firebase FiRestore)
Crash on Google Play Pre-Launch Report: java.lang.NoSuchMethodError(Google Play发布前崩溃报告:java.lang.NoSuchMethodError)