PotatoChat

659. PotatoChat手机版折叠屏适配

作者：

user

在

下面给出一套可落地的方案与实现要点，帮助把“PotatoChat 手机版”做成对折叠屏（foldable）友好的应用。内容包含技术选型、Android 代码/依赖示例、Compose/传统 View 的处理建议、Web/React Native/Flutter 的简要说明，以及测试与 PR 模板，便于直接在项目中使用和验收。

659. PotatoChat手机版折叠屏适配

一、总体思路（关键点）

  • 优先目标：在折叠/展开切换、跨铰链（hinge）布局、分屏/多窗口场景下保持 UI 连贯且可用。
  • 适配策略：根据屏幕姿态（posture）和可用显示区域（display segments）决定单栏/双栏/大屏模式（master-detail）。
  • 尽量使用官方库（Jetpack WindowManager）获取设备的折叠信息并处理生命周期/布局变化。
  • 兼容退化方案：若设备或浏览器不支持折叠 API，应回退到常规响应式布局（sw/width breakpoints）。

二、Android 推荐实现（原生/AndroidX）

  1. 依赖（Gradle）
  • 使用 Jetpack WindowManager（版本请以项目 Gradle 仓库的最新稳定版为准）：
    implementation "androidx.window:window:1.1.0" （或 1.0.x / 1.2.x，按实际仓库）
  • Compose 项目还可以配合 Compose UI（若使用）。
  1. 获取折叠信息（Kotlin，Activity 中）
    示例（简化）：
  • 在 Activity 中订阅 window layout info：
val windowInfoTracker = WindowInfoTracker.getOrCreate(application)
lifecycleScope.launch {
    windowInfoTracker.windowLayoutInfo(this@MainActivity)
        .flowWithLifecycle(lifecycle, Lifecycle.State.STARTED)
        .collect { layoutInfo ->
            val foldingFeatures = layoutInfo.displayFeatures.filterIsInstance<FoldingFeature>()
            if (foldingFeatures.isEmpty()) {
                // 单屏模式
                showSinglePane()
            } else {
                val folding = foldingFeatures.first()
                when (folding.state) {
                    FoldingFeature.State.FLAT -> showSinglePane()
                    FoldingFeature.State.HALF_OPENED -> showHingeAwareUi(folding)
                }
                // 根据 folding.orientation 判断是水平折叠还是垂直折叠
            }
        }
}

说明：FoldingFeature 提供 bounds、orientation、state，允许我们判断铰链位置并调整布局（如不跨铰链显示重要内容）。

  1. 布局策略（建议）
  • 垂直铰链（屏幕左右两个竖分区域）：考虑把会话列表放左侧、聊天窗放右侧（双栏）。
  • 水平铰链（上下分区）：通常保持单列滚动或把详情放下方，避免重要交互跨铰链。
  • 不要把交互控件放在铰链区域，防止被遮挡或不可点击。
  • 使用 master-detail（两栏）布局时保证两栏在窄屏下自动回退到单栏（使用 sw/Narrow breakpoint）。
  • 使用 ConstraintLayout 或 Compose 的 Row/Column ，也可以用 AndroidX SlidingPaneLayout 或自己实现分栏。
  1. Compose（若项目为 Jetpack Compose）
  • 仍使用 WindowInfoTracker 获取信息；可封装为 rememberWindowLayoutInfo 的可组合函数：
@Composable
fun rememberWindowLayoutInfo(): State<WindowLayoutInfo?> {
    val context = LocalContext.current
    val lifecycleOwner = LocalLifecycleOwner.current
    val windowInfoTracker = WindowInfoTracker.getOrCreate(context)
    val state = remember { mutableStateOf<WindowLayoutInfo?>(null) }
    DisposableEffect(lifecycleOwner) {
        val scope = CoroutineScope(Dispatchers.Main)
        val job = scope.launch {
            windowInfoTracker.windowLayoutInfo(context as Activity)
                .flowWithLifecycle(lifecycleOwner.lifecycle, Lifecycle.State.STARTED)
                .collect { info -> state.value = info }
        }
        onDispose {
            job.cancel()
        }
    }
    return state
}
  • 根据 state.value 中的 FoldingFeature 决定显示 SinglePane/TwoPane 组合。Jetpack Compose 生态中也有 TwoPane（AndroidX）可参考。
  1. Activity 配置（生命周期）
  • 推荐不要使用 configChanges 直接吞掉所有配置变更，优先响应系统配置变化并利用 WindowManager 提供的信息处理 UI。若用了 configChanges，注意手动处理尺寸/方向/折叠变化。
  • 当展开/折叠发生时应保证状态（输入、光标、未读消息等）不丢失：把 UI 状态放在 ViewModel/rememberSaveable 中。

三、Web / PWA（若 PotatoChat 有 Web 视图）

  • 现代浏览器支持 CSS 折叠屏适配 API：viewport-segment-* env 变量 与媒体查询。
  • 示例：
@media (horizontal-viewport-segments: 2) {
  /* 在有两个水平段的设备（垂直铰链）时禁用内容跨铰链 */
  .chat-container {
    /* 例如为左右两段各自设置宽度或把重要区域避免放在铰链中 */
  }
}
/* 访问铰链安全区域 */
padding-left: env(viewport-segment-left);
  • Chrome / Edge 等对这些特性部分支持。需提供降级方案（常规 responsive CSS）。

四、跨平台框架简述

  • Flutter：
    • 可用 platform channels 调用 Android WindowManager 或使用 community 插件（如 foldable_support 等）。
    • 通过 MediaQuery.of(context).size 判断分段，并结合 platform 信息决定两栏布局。
  • React Native：
    • 可引入 native 模块或 community package（搜索 react-native-foldable / react-native-window-manager）。
    • 也可在 Android 原生层提供信息并通过 bridge 传递给 JS 层。

五、测试 & 验收清单

  • 在 Android Emulator 上创建折叠屏 AVD（如 Surface Duo / Galaxy Fold 模板）进行功能测试。
  • 在真实设备（如 Samsung Fold/Flip、Surface Duo）上测试：
    • 展开/折叠切换：UI 平滑、状态不丢失。
    • 铰链处交互不可用、内容没有被遮挡。
    • 多窗口（split-screen）和 freeform 测试。
    • 旋转、从后退栈恢复等场景。
    • 边界情况：极窄/极宽面板、半开状态、双屏模式。
  • 性能：在双栏模式下确保列表/图片加载不卡顿，避免同时加载过多数据或重复布局计算。
  • 无障碍（Accessibility）：两栏下仍保持无障碍焦点顺序合理。

六、常见实现细节 & 注意点

  • 不要把弹窗（Dialog）跨铰链展示，或在铰链上定位弹窗。
  • 对于重要交互，避免把单个控件横跨铰链区域。
  • 铰链宽度可能不为 0（存在“安全区域”），使用 FoldingFeature.bounds 来避开该区域。
  • 在某些设备上折叠为 FLAT，但物理铰链依然存在，要兼顾逻辑判断（state FLAT vs HALF_OPENED）。
  • 若项目使用 Fragment，考虑将主/子屏内容拆分为两个 Fragment 并按模式动态 attach/detach。

七、提交/PR 模板（可直接用）

  • PR 标题：659: 手机端折叠屏适配（支持 Jetpack WindowManager）
  • 变更点（简短）：
    • 添加 androidx.window 依赖
    • 新增 WindowLayoutInfo 订阅与 FoldingFeature 处理（MainActivity / ViewModel）
    • 新增双栏布局（res/layout/activity_chat_two_pane.xml / Compose TwoPane）
    • 调整状态保存（ViewModel -> 保证折叠/展开切换不丢失）
    • 测试：在折叠屏 AVD 与实机（Galaxy Fold）验证通过
  • 测试步骤（在 PR 描述里写明）
  • 回退方案：未检测到折叠 API 时维持现有单列 UI

八、示例行为建议（UX）

  • 手机窄屏：默认单列，消息详情覆盖列表（导航到聊天页）。
  • 折叠展开后（宽屏）：自动显示列表+详情并列（左列表右聊天）。
  • 半开（铰链为中线且状态 HALF_OPENED）：按铰链方向决定是否显示两面，或保持单面避免被遮挡。
  • 在大屏/两栏下，保持底部输入栏可见，避免被键盘覆盖（可调整窗口输入模式）。

如果你愿意，我可以：

  • 根据 PotatoChat 当前代码仓（给我看目录结构或关键文件）给出具体的代码补丁或 PR diff 示例；
  • 提供 Compose 或 XML 的两栏完整实现样例（带 ViewModel 状态管理）；
  • 给出在 Emulator/Surface Duo/三星折叠机型上具体的测试命令与截图示例。

你希望我先给出哪个具体实现（原生 View、Jetpack Compose、Flutter 或 React Native）？或者把仓库结构贴上来我直接帮你生成 patch？

更多文章