如何在Flutter中实现固定布局设计？iPad适配移动端显示

iOS原生开发（Swift/Objective-C） #

• 修改项目配置快速实现
  打开Xcode项目，进入TARGETS -> General -> Deployment Info，把Devices选项改成iPhone。这样应用默认只适配iPhone，iPad上运行时会自动以手机尺寸显示，横竖屏都保持手机版UI，周围自动补黑边。
  要是需要自定义允许的屏幕方向，就在Info.plist里添加UISupportedInterfaceOrientations~ipad，设置你需要的方向；还可以加UIRequiresFullScreen设为YES，强制应用全屏但仍保持手机尺寸。
• 代码控制固定尺寸
  在iOS 13+的SceneDelegate或者旧版的AppDelegate里，给根视图控制器设置固定的preferredContentSize，比如用iPhone 11的414x896尺寸：

  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
      guard let windowScene = (scene as? UIWindowScene) else { return }
      let window = UIWindow(windowScene: windowScene)
      let rootVC = ViewController()
      rootVC.preferredContentSize = CGSize(width: 414, height: 896)
      window.rootViewController = rootVC
      self.window = window
      window.makeKeyAndVisible()
  }
  

Flutter开发 #

• 直接限制设备类型
  修改ios/Runner/Info.plist，添加以下配置，强制应用只支持iPhone，iPad上会以手机模式运行：

  <key>UIDeviceFamily</key>
  <array>
      <integer>1</integer> <!-- 仅支持iPhone -->
  </array>
  

• 固定设计稿缩放
  用flutter_screenutil第三方库，绑定手机设计稿尺寸，不管iPad屏幕多大，都按设计稿比例缩放：

  import 'package:flutter_screenutil/flutter_screenutil.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      // 以iPhone 11的414x896作为设计稿尺寸
      return ScreenUtilInit(
        designSize: const Size(414, 896),
        minTextAdapt: true,
        splitScreenMode: true,
        builder: (context, child) {
          return MaterialApp(
            home: HomePage(),
          );
        },
      );
    }
  }
  

React Native开发 #

• 限制设备类型
  修改ios/Info.plist，设置只支持iPhone：

  <key>UIDeviceFamily</key>
  <array>
      <integer>1</integer>
  </array>
  

• 基于手机尺寸做响应式布局
  用react-native-responsive-screen库，以手机尺寸为基准设置布局参数：

  import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
  
  const styles = StyleSheet.create({
    container: {
      width: wp('100%'),
      height: hp('100%'),
    },
    titleText: {
      fontSize: wp('4.5%'),
    },
  });
  

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