折叠屏手机竖屏模式下ListDetailPaneScaffold无法显示列表详情视图

期望折叠屏手机在竖屏模式下显示列表-详情视图，但当前仅显示列表（与普通手机一致），仅横屏模式可正常呈现列表详情。

ListDetailPaneScaffold实现代码 #

setContent {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    AppMaterial3Theme {
        var selectedItem: SettingDetailsScreen by rememberSaveable {
            mutableStateOf(SettingDetailsScreen.AccountDetails)
        }
        val navigator = rememberListDetailPaneScaffoldNavigator()
        ListDetailPaneScaffold(
            scaffoldState = navigator.scaffoldState,
            listPane = {
                BackHandler {
                    if (paneAdaptedValue == PaneAdaptedValue.Hidden) {
                        navigator.navigateBack()
                    } else {
                        finish()
                    }
                }
                SettingsEntryPointsScreen(
                    uiState = uiState
                ) { item ->
                    selectedItem = item.detailScreen
                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                }
            },
            detailPane = {
                if (uiState is SettingsEntryPointUiState.SettingsDetails) {
                    SettingDetailContent { container ->
                        updateDetailFragment(
                            selectedItem,
                            container
                        )
                    }
                }
            }
        )
    }
}

参考资源 #

• 参考Jetpack Compose官方列表-详情布局文档
• 预期效果参考三星设置应用竖屏列表-详情视图：
  

解决方案 #

问题根源在于ListDetailPaneScaffold默认适配逻辑基于屏幕宽度阈值，折叠屏竖屏宽度通常处于Medium区间，默认仅显示单Pane（列表）。需自定义适配策略，强制折叠屏竖屏时显示双Pane。

步骤1：引入WindowSizeClass依赖（若未添加） #

确保项目中已引入相关依赖：

implementation "androidx.compose.material3:material3-window-size-class:1.2.0"

步骤2：基于屏幕尺寸自定义适配逻辑 #

在Activity中获取WindowSizeClass，传入ListDetailPaneScaffold的adaptation参数，修改适配规则：

// 在Activity中获取WindowSizeClass
val windowSizeClass = calculateWindowSizeClass(this)

setContent {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    AppMaterial3Theme {
        var selectedItem: SettingDetailsScreen by rememberSaveable {
            mutableStateOf(SettingDetailsScreen.AccountDetails)
        }
        val navigator = rememberListDetailPaneScaffoldNavigator()
        ListDetailPaneScaffold(
            scaffoldState = navigator.scaffoldState,
            // 自定义适配：Medium及以上尺寸（含折叠屏竖屏）显示双Pane
            adaptation = { _ ->
                when (windowSizeClass.widthSizeClass) {
                    WindowWidthSizeClass.Compact -> ListDetailPaneAdaptation.ListOnly
                    WindowWidthSizeClass.Medium, WindowWidthSizeClass.Expanded -> ListDetailPaneAdaptation.TwoPane
                }
            },
            listPane = {
                BackHandler {
                    if (paneAdaptedValue == PaneAdaptedValue.Hidden) {
                        navigator.navigateBack()
                    } else {
                        finish()
                    }
                }
                SettingsEntryPointsScreen(
                    uiState = uiState
                ) { item ->
                    selectedItem = item.detailScreen
                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                }
            },
            detailPane = {
                if (uiState is SettingsEntryPointUiState.SettingsDetails) {
                    SettingDetailContent { container ->
                        updateDetailFragment(
                            selectedItem,
                            container
                        )
                    }
                }
            }
        )
    }
}

步骤3：（可选）基于折叠屏特性精准判断 #

若需仅针对折叠屏设备适配，可通过DisplayFeature判断竖屏折叠状态：

setContent {
    val displayFeatures = rememberDisplayFeatures()
    // 判断是否为竖屏折叠设备
    val isVerticalFoldable = displayFeatures.any { 
        it is FoldFeature && it.orientation == FoldFeatureOrientation.Vertical 
    }
    
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    AppMaterial3Theme {
        var selectedItem: SettingDetailsScreen by rememberSaveable {
            mutableStateOf(SettingDetailsScreen.AccountDetails)
        }
        val navigator = rememberListDetailPaneScaffoldNavigator()
        ListDetailPaneScaffold(
            scaffoldState = navigator.scaffoldState,
            adaptation = { _ ->
                if (isVerticalFoldable) ListDetailPaneAdaptation.TwoPane 
                else ListDetailPaneAdaptation.ListOnly
            },
            // 其他参数保持不变
        )
    }
}

原理说明 #

默认ListDetailPaneScaffold的适配规则：

• Compact（<600dp）：仅显示列表
• Medium（600-840dp）：列表与详情切换显示
• Expanded（>840dp）：双Pane显示

折叠屏竖屏宽度通常落在Medium区间，因此默认仅显示列表。通过自定义adaptation，强制Medium及以上尺寸或折叠屏设备显示双Pane，即可实现竖屏模式下的列表-详情视图。

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