如何解决Flutter中ColorOS手机上的小部件显得很大的问题？

Question

我开始在 Flutter 中开发一个应用程序，该设计在配备原生 Android 的 Google Pixel 手机上看起来还不错，但在 Oppo 上，UI 元素看起来放大了。

我检查了显示设置，它们在这两个操作系统上是不同的：

• 在 Google Pixel 上，您的刻度大小为 5 档，默认设置为 2/5
• 在 ColorOS 上，刻度只有 3 个档位，默认设置为 2/3

我正在具有相似 DPI 和屏幕分辨率的手机上进行测试。只是 Oppo 上的设备像素比高于 Pixel，并且缩放停止值更大。

作为开发人员，您是否希望采取一些措施来解决这个问题？我的意思是，我使用逻辑像素，操作系统在一个特定小部件中渲染多少物理像素并不取决于我。

我已经检查了仓库 Wonderous：https://github.com/gskinnerTeam/flutter-wonderous-app 他们对此没有做任何事情。他们的应用程序在 Oppo 手机上看起来确实有点放大。

我不想为此使用 screen_utils 包：https://pub.dev/packages/flutter_screenutil

实际上，作为一名开发人员，我什至不认为这整个情况是我这边的问题，但我的客户一直告诉我，它看起来不像设计中的那样......

您是如何注意到您的应用程序在某些手机上看起来是放大的？你对此做了什么吗？

Answer 1

这应该可以做到，将大小固定为指定的屏幕百分比。

class DynamicSize {
  BuildContext context;

  DynamicSize(this.context);

  double w(double widthPercent, {bool above100=false}){
    // For Text.fontSize() use only this.w
    if (widthPercent<=100 || above100){
      double percent = widthPercent/100;
      return MediaQuery.of(context).size.width * percent;
    } else {
      throw Exception('Width above a 100%, and above100 is false');
    }
  }

  double h(double heightPercent, {bool above100=false}){
    if (heightPercent<=100 || above100){
      double percent = heightPercent/100;
      return MediaQuery.of(context).size.height * percent;
    } else {
      throw Exception('Height above a 100%, and above100 is false');
    }
  }
}

实施：

  Widget build(BuildContext context) {
    var size = DynamicSize(context);

    return Scaffold(
      body: Container(
        width: size.w(50),  // Half the screen width
        height: size.h(30),  // 30% its height
        decoration: BoxDecoration(
            color: Colors.blueGrey
        ),
      ),
    );
  }