如何在Flutter中确保像素完美的布局

Question

我们正在开发一个支持多种语言的flutter应用程序。客户希望该应用程序在所有手机上看起来都完全相同，就像给我们的 Figma 设计一样。他们向我们发送了 Figma 设计、Android 和 iOS 手机并排放置的屏幕截图。他们画了红色直线来显示布局上的差异。举个例子 - 见下文：

他们对此的问题是：

1 和 2 - 间隙不一样。

3 和 4 - 底部按钮不在同一垂直位置

5、6 和 7 - 三者中的星形图标都不相同

8、9 和 10 - 标题与所有三个的位置不同。

我的问题是

1 - 是否可以确保所有手机和两个操作系统的垂直位置相同 - 无论用户手机的默认字体大小和用户手机的操作系统以及所有语言如何。

2 - 如果是，实现此目的的方法是什么？

Answer 1

有多种方法可以实现响应式屏幕

1. MediaQuery 的使用

   double screenWidth = MediaQuery.of(context).size.width;
   double screenHeight = MediaQuery.of(context).size.height;
   
   Container(
     width: screenWidth * 0.8, // 80% of the screen width
     height: screenHeight * 0.2, // 20% of the screen height
   );
   

2. 使用布局生成器

    LayoutBuilder(
       builder: (context, constraints) {
         double maxWidth = constraints.maxWidth;
          return maxWidth > 600
            ? Text("Large Screen Layout")
             : Text("Small Screen Layout");
       },
    );

3. 使用扩展且灵活

Row(
  children: [
    Expanded(
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
);

4. 使用预定义包

flutter_screenutil： [帮助根据屏幕尺寸缩放小部件和字体]

import 'package:flutter_screenutil/flutter_screenutil.dart';

ScreenUtil.init(context, designSize: Size(360, 690));

Container(
  width: 100.w, 
  height: 50.h, 
);

responsive_framework：【自动适应不同屏幕尺寸和断点】

MaterialApp(
  builder: (context, child) => ResponsiveWrapper.builder(
    child,
    maxWidth: 1200,
    minWidth: 480,
    defaultScale: true,
    breakpoints: [
      ResponsiveBreakpoint.resize(480, name: MOBILE),
      ResponsiveBreakpoint.autoScale(800, name: TABLET),
      ResponsiveBreakpoint.autoScale(1200, name: DESKTOP),
    ],
  ),
);

sizer： [轻松调整小部件和文本的大小。]

import 'package:sizer/sizer.dart';

Sizer(
  builder: (context, orientation, deviceType) {
    return Container(
      width: 80.w, // Percentage width
      height: 20.h, // Percentage height
    );
  },
);