【问题标题】:What is the purpose of the PaddingValues parameter in a Scaffold脚手架中 PaddingValues 参数的用途是什么
【发布时间】:2021-12-03 04:14:35
【问题描述】:
@Composable
fun LayoutsCodelab() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "LayoutsCodelab")
                }
            )
        }
    ) { innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
    }
}

删除innerPadding 不会改变任何东西。

请注意,我是 Compose 的新手。
如果有任何困惑,请在 cmets 中询问

【问题讨论】:

    标签: android android-jetpack-compose android-jetpack-compose-scaffold


    【解决方案1】:

    仅当您设置了 bottomBar 参数时,才会设置为您的内容提供的填充值。不幸的是,这没有记录。如果设置bottomBar,Scaffold会将PaddingValues的底部填充设置为bottomBar内容使用的内容高度。其他填充值(开始、顶部、结束)当前设置为零。不知道将来会不会改变。

    如果您的内容包含可滚动列表并且您希望将列表底部偏移底部栏内容的高度,则提供底部填充很有用。如果您不包含任何 bottomBar 内容,则 PaddingValues 将始终保持设置为零。

    下面的示例显示了当 bottomBar 使用 BottomAppBar 时如何将 PaddingValues 参数传递到您的内容中。它显示 50 个项目的列表。将填充添加到 Column 后,您可以滚动到底部并查看最后一项。如果您删除 Column 的填充并重复测试,当您滚动到底部时,最后几项不可见,因为 Column 一直延伸到脚手架的底部,没有任何底部填充,底部应用栏覆盖了最后项目:

    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            startActivity(intent)
    
            setContent {
    
                Scaffold(
                    topBar = {
                        TopAppBar(
                            title = {
                                Text(text = "Padding values in a scaffold")
                            }
                        )
                    },
                    bottomBar = {
                        BottomAppBar() {
                            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
                                IconButton(onClick = { /* doSomething() */ }) {
                                    Icon(Icons.Filled.Menu, contentDescription = "Localized description")
                                }
                            }
                            Spacer(Modifier.weight(1f, true))
                            IconButton(onClick = { /* doSomething() */ }) {
                                Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
                            }
                            IconButton(onClick = { /* doSomething() */ }) {
                                Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
                            }
                        }
                    }
                ) { paddingValues ->
                    Column(modifier = Modifier
                        .fillMaxSize()
                        .padding(bottom = paddingValues.calculateBottomPadding())
                        .verticalScroll(rememberScrollState())) {
    
                        Text("Bottom app bar padding:  $paddingValues")
    
                        repeat(50) {
                            Text(it.toString())
                        }
                    }
                }
            }
        }
    }
    

    我不明白为什么 Google 不包含顶部填充。毕竟,如果包含顶部的应用栏,它也会占用空间。我认为原因与顶部栏倒塌有关。如果顶部应用栏在滚动时折叠,则内容区域需要扩展 - 因此在顶部添加填充可能没有意义。如果顶部应用栏保持固定,这确实有意义。

    【讨论】:

    • 你是说,如果有bottom-App-Bar,那么它上面的内容会自动计算并调整所需的bottom-padding
    • innerPaddingpaddingValues 有什么区别?我问了关于innerPadding的问题。何时使用innerPadding,何时使用paddingValues
    • 如果您向 bottomBar 参数提供内容,Scaffold 将计算该内容的高度并在 PaddingValues 中返回该高度 - 您可以通过调用 calculateBottomPadding() 检索该高度。脚手架不会计算底部栏上方内容的高度,而是计算您提供给 bottomBar 参数的内容。 “innerPadding”与我使用的“paddingValues”变量相同。您只是碰巧将您的命名为“innerPadding”。您可以将参数命名为您想要的任何名称 - 这就是 Kotlin lambda 的工作方式。
    • @Johaan 好的理解......正如你所说,这仅适用于底部应用栏而不适用于顶部应用栏,如果我做对了
    • 没错。请记住,bottomBar 不必包含可组合的 AppBottomBar。它可以包含您想要的任何内容,尽管 AppBottomBar 是底部使用最多的小部件。 topBar 中的任何内容都不包含在 paddingValues 中,这有点可惜。如果您发现我的解决方案有用,请将其标记为已接受。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-07-20
    • 2018-12-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-28
    • 1970-01-01
    相关资源
    最近更新 更多