Flutter移动端旋转后显示平板界面问题求助

你的问题出在用设备硬件类型（SizerUtil.deviceType）判断界面适配，而不是基于当前屏幕的实际可用尺寸。SizerUtil.deviceType是根据设备的最短边长度（固定硬件属性）区分的，和屏幕旋转后的尺寸变化无关——比如大屏手机旋转后宽度可能达到平板级，但硬件类型还是mobile，或者部分折叠屏设备展开后被识别为tablet，但你希望它依然显示手机界面。

修复方案：改用屏幕宽度作为判断依据 #

将响应式判断逻辑替换为基于当前屏幕的实际宽度，无论屏幕怎么旋转，都会根据当前可用空间选择对应的界面：

import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';

class Responsive extends StatelessWidget {
  const Responsive({required this.mobile, required this.tablet, required this.desktop, super.key});

  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

  // 自定义宽度阈值，可根据设计需求调整
  static bool isMobile(BuildContext context) => MediaQuery.of(context).size.width < 600;
  static bool isTablet(BuildContext context) => MediaQuery.of(context).size.width >= 600 && MediaQuery.of(context).size.width < 1200;
  static bool isDesktop(BuildContext context) => MediaQuery.of(context).size.width >= 1200;

  @override
  Widget build(BuildContext context) {
    debugPrint("当前屏幕宽度: ${MediaQuery.of(context).size.width}");
    debugPrint("isMobile: ${isMobile(context)}");
    debugPrint("isTablet: ${isTablet(context)}");
    debugPrint("isDesktop: ${isDesktop(context)}");

    return LayoutBuilder(
      builder: (context, constraints) {
        // 也可以直接用LayoutBuilder的constraints.maxWidth判断，效果一致
        final currentWidth = constraints.maxWidth;
        if (currentWidth >= 1200) {
          return desktop;
        } else if (currentWidth >= 600) {
          return tablet;
        } else {
          return mobile;
        }
      },
    );
  }
}

额外优化建议 #

• 自定义阈值：根据设计规范调整宽度阈值，比如如果希望大屏手机（宽度720）依然显示手机界面，可以把平板阈值提高到800。
• 混合判断（可选）：如果需要结合设备类型和尺寸（比如折叠屏展开后既可以识别为平板，也可以强制显示手机界面），可以修改判断条件：

  static bool isMobile(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return width < 600 || (SizerUtil.deviceType == DeviceType.mobile && width < 800);
  }
  

• 确认Sizer初始化：确保在MaterialApp外层正确包裹Sizer，如果需要自定义设备判断阈值，可以在初始化时设置：

  void main() {
    runApp(
      Sizer(
        breakpoints: const Breakpoints(
          mobile: 0,
          tablet: 600,
          desktop: 1200,
        ),
        builder: (context, orientation, deviceType) {
          return MaterialApp(home: MainScreen());
        },
      ),
    );
  }
  

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