Flutter 应用程序 UI 在真实设备上比在模拟器中更大

Question

我有这个 flutter 应用程序，可以在 iOS 和 Android 模拟器上完美运行: app on iOS simulator

但是当我在 iPhone 12 上运行相同的应用程序时，所有内容(字体大小、文本字段等)都显得更大，因此出现渲染溢出错误。这种升级发生在我的应用程序的每个屏幕上。 app on real iPhone 12

我尝试将 Mac 完全关闭然后再次打开。 Flutter doctor 也完全没问题。

[编辑] 完整的默认 Flutter 项目也会发生这种情况。我不明白为什么缩放只发生在真实设备上而不是模拟器中。

这是模拟器中的默认项目:

以下是真实 iPhone 12 上的默认项目:

Answer 1

您必须使用 MediaQuery.of(context).size 动态计算大小 或者使用某种包，他们动态地为你做。

import "package:flutter/material.dart";
import 'package:flutter_screenutil/flutter_screenutil.dart';


void main() async {
    // Add this line
      await ScreenUtil.ensureScreenSize();
      runApp(MyApp());
}


class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);
   @override
   Widget build(BuildContext context) {

     // Add this Widget and call your root Widget here.
      return ScreenUtilInit(
         builder: (context , child) {
            return MaterialApp(
               debugShowCheckedModeBanner: false,
               title: 'First Method',
               home: Column(
                   children:<Wigdet>[
                      Container(
                         width: 50.w,
                        height:200.h
                      ),
                       Text("Ola".sp)
                ]
              ),
        );
      }
    );
  },
);

} }