如何移除ListDetailPaneScaffold产生的内边距？

问题描述 #

使用ListDetailPaneScaffold时，发现各个面板（列表/详情/额外面板）周围存在默认内边距，希望移除这些多余的内边距，示例代码如下：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.material3.adaptive.AnimatedPane
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
import androidx.compose.material3.adaptive.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.ListDetailPaneScaffoldRole
import androidx.compose.material3.adaptive.rememberListDetailPaneScaffoldNavigator
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@ExperimentalMaterial3Api
class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3AdaptiveApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator()
            ListDetailPaneScaffold(
                scaffoldState = scaffoldNavigator.scaffoldState,
                listPane = {
                    AnimatedPane(
                        modifier = Modifier.fillMaxSize()
                    ) {
                        Surface(
                            color = MaterialTheme.colorScheme.secondary,
                            onClick = {
                                scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                            }
                        ) {
                            Text("List")
                        }
                    }
                },
                extraPane = {
                    AnimatedPane(
                        modifier = Modifier.fillMaxSize()
                    ) {
                        Surface(
                            modifier = Modifier.fillMaxSize(),
                            color = MaterialTheme.colorScheme.tertiary,
                            onClick = {
                                scaffoldNavigator.navigateBack()
                            }
                        ) {
                            Text("Extra")
                        }
                    }
                }
            ) {
                AnimatedPane(
                    modifier = Modifier
                ) {
                    Surface(
                        color = MaterialTheme.colorScheme.primary,
                    ) {
                        Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
                            Text("Detail")
                            Row(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(horizontal = 4.dp),
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Surface(
                                    onClick = {
                                        scaffoldNavigator.navigateBack()
                                    },
                                    modifier = Modifier
                                        .weight(0.5f)
                                        .fillMaxHeight(),
                                    color = MaterialTheme.colorScheme.primary.copy(alpha = 0.8f)
                                ) {
                                    Box(
                                        modifier = Modifier.fillMaxSize(),
                                        contentAlignment = Alignment.Center
                                    ) {
                                        Text("Previous")
                                    }
                                }
                                VerticalDivider()
                                Surface(
                                    onClick = {
                                        scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Extra)
                                    },
                                    modifier = Modifier
                                        .weight(0.5f)
                                        .fillMaxHeight(),
                                    color = MaterialTheme.colorScheme.primary.copy(alpha = 0.6f)
                                ) {
                                    Box(
                                        modifier = Modifier.fillMaxSize(),
                                        contentAlignment = Alignment.Center
                                    ) {
                                        Text("Next")
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

解决方案 #

ListDetailPaneScaffold的默认内边距由其内置布局逻辑控制，有两种可靠的移除方式：

方式一：自定义布局参数（推荐）

通过ListDetailPaneScaffoldDefaults.scaffoldLayout设置全局的contentPadding为PaddingValues(0.dp)，彻底移除所有面板的内边距，还可按需调整面板间的间距：

ListDetailPaneScaffold(
    scaffoldState = scaffoldNavigator.scaffoldState,
    // 自定义布局参数，移除内边距
    layout = ListDetailPaneScaffoldDefaults.scaffoldLayout(
        contentPadding = PaddingValues(0.dp),
        paneSpacing = 0.dp // 可选：移除面板间的分隔间距
    ),
    // 其余参数保持不变
)

方式二：单独抵消指定面板的内边距

如果只需移除某个面板的内边距，可给对应AnimatedPane添加负padding抵消默认的16dp内边距：

AnimatedPane(
    modifier = Modifier.fillMaxSize().padding(-16.dp)
) {
    // 面板内容
}

修改后的完整代码 #

以下是应用方式一后的完整可运行代码：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.material3.adaptive.AnimatedPane
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
import androidx.compose.material3.adaptive.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.ListDetailPaneScaffoldDefaults
import androidx.compose.material3.adaptive.ListDetailPaneScaffoldRole
import androidx.compose.material3.adaptive.rememberListDetailPaneScaffoldNavigator
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@ExperimentalMaterial3Api
class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3AdaptiveApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator()
            ListDetailPaneScaffold(
                scaffoldState = scaffoldNavigator.scaffoldState,
                layout = ListDetailPaneScaffoldDefaults.scaffoldLayout(
                    contentPadding = PaddingValues(0.dp),
                    paneSpacing = 0.dp
                ),
                listPane = {
                    AnimatedPane(
                        modifier = Modifier.fillMaxSize()
                    ) {
                        Surface(
                            color = MaterialTheme.colorScheme.secondary,
                            onClick = {
                                scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                            }
                        ) {
                            Text("List")
                        }
                    }
                },
                extraPane = {
                    AnimatedPane(
                        modifier = Modifier.fillMaxSize()
                    ) {
                        Surface(
                            modifier = Modifier.fillMaxSize(),
                            color = MaterialTheme.colorScheme.tertiary,
                            onClick = {
                                scaffoldNavigator.navigateBack()
                            }
                        ) {
                            Text("Extra")
                        }
                    }
                }
            ) {
                AnimatedPane(
                    modifier = Modifier.fillMaxSize()
                ) {
                    Surface(
                        color = MaterialTheme.colorScheme.primary,
                    ) {
                        Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
                            Text("Detail")
                            Row(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(horizontal = 4.dp),
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Surface(
                                    onClick = {
                                        scaffoldNavigator.navigateBack()
                                    },
                                    modifier = Modifier
                                        .weight(0.5f)
                                        .fillMaxHeight(),
                                    color = MaterialTheme.colorScheme.primary.copy(alpha = 0.8f)
                                ) {
                                    Box(
                                        modifier = Modifier.fillMaxSize(),
                                        contentAlignment = Alignment.Center
                                    ) {
                                        Text("Previous")
                                    }
                                }
                                VerticalDivider()
                                Surface(
                                    onClick = {
                                        scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Extra)
                                    },
                                    modifier = Modifier
                                        .weight(0.5f)
                                        .fillMaxHeight(),
                                    color = MaterialTheme.colorScheme.primary.copy(alpha = 0.6f)
                                ) {
                                    Box(
                                        modifier = Modifier.fillMaxSize(),
                                        contentAlignment = Alignment.Center
                                    ) {
                                        Text("Next")
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

注意事项 #

• 方式一从根源上控制内边距，是更推荐的规范写法，避免了负padding的潜在问题。
• 如果需要保留部分内边距，可调整contentPadding的数值，比如设置为PaddingValues(8.dp)来缩小内边距。

内容的提问来源于stack exchange，提问作者Oskar Persson