Flutter折叠屏适配：如何准确判断设备折叠/展开状态？

1. 替代尺寸判断的可靠检测方式 #

单纯通过屏幕宽高判断折叠状态确实存在误判风险（比如高分辨率小屏设备），可以直接基于系统提供的硬件特征来检测折叠/展开状态——利用MediaQuery中的displayFeatures属性，它会返回设备上的折叠区域、铰链等硬件特征信息。

示例代码：

bool isFolded(BuildContext context) {
  final displayFeatures = MediaQuery.of(context).displayFeatures;
  for (final feature in displayFeatures) {
    // 检测是否存在折叠或铰链区域
    if (feature.type == DisplayFeatureType.fold || feature.type == DisplayFeatureType.hinge) {
      final screenSize = MediaQuery.of(context).size;
      // 判断该区域是否将屏幕分割为两个独立显示区域（即设备处于折叠状态）
      bool isVerticalSplit = feature.bounds.left > 0 && feature.bounds.left < screenSize.width;
      bool isHorizontalSplit = feature.bounds.top > 0 && feature.bounds.top < screenSize.height;
      if (isVerticalSplit || isHorizontalSplit) {
        return true;
      }
    }
  }
  return false;
}

这种方式直接依赖系统对折叠硬件的识别，不会因为屏幕分辨率或尺寸阈值变化出现误判，准确性更高。

2. 折叠状态下的UI适配方案 #

可以结合上述检测结果，动态切换布局结构，适配折叠/展开两种状态：

示例代码：

class FoldableAdaptivePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final isDeviceFolded = isFolded(context);
    return Scaffold(
      appBar: AppBar(title: const Text('折叠屏适配')),
      body: isDeviceFolded
          // 折叠状态：使用紧凑的单列布局，适配小屏显示
          ? Column(
              children: [
                Expanded(child: _buildMainContent()),
                const SizedBox(height: 12),
                Expanded(child: _buildSecondaryContent()),
              ],
            )
          // 展开状态：使用双列/分栏布局，利用大屏空间
          : Row(
              children: [
                Expanded(flex: 3, child: _buildMainContent()),
                const SizedBox(width: 16),
                Expanded(flex: 1, child: _buildSidebarContent()),
              ],
            ),
    );
  }

  Widget _buildMainContent() => const Center(child: Text('主内容区域'));
  Widget _buildSecondaryContent() => const Center(child: Text('次要内容区域'));
  Widget _buildSidebarContent() => const Center(child: Text('侧边栏'));
}

也可以结合LayoutBuilder获取父组件可用空间，进一步细化适配逻辑，确保UI在折叠状态下不会出现元素过大、布局溢出的问题。

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