脚手架中 PaddingValues 参数的用途是什么

Question

@Composable
fun LayoutsCodelab() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "LayoutsCodelab")
                }
            )
        }
    ) { innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
    }
}

删除 innerPadding 不会改变任何内容。

请注意，我是 Compose 的新手。
如有不解，欢迎评论提问

Answer 1

仅当您设置 bottomBar 参数时，才会设置为您的内容提供的填充值。不幸的是，这没有记录在案。如果设置 bottomBar，Scaffold 会将 PaddingValues 的底部填充设置为 bottomBar 内容使用的内容的高度。其他填充值（开始、顶部、结束）当前设置为零。不确定将来是否会改变。

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

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

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 不包含顶部填充。毕竟如果把top app bar算进去，也是占了space。我认为原因与折叠的顶部栏有关。如果顶部应用栏在滚动时折叠，则内容区域需要扩展 - 因此在顶部添加填充可能没有意义。如果顶部应用栏保持固定，这确实有意义。

脚手架中 PaddingValues 参数的用途是什么

What is the purpose of the PaddingValues parameter in a Scaffold

android

android-jetpack-compose

android-jetpack-compose-scaffold