Mu 缩放系统

使用 Mu 系统让您的设计适应所有屏幕

它是如何工作的？

在开发适用于不同屏幕的应用程序时，会出现以下问题：小部件和文本难以适应不同的扩展。例如，如果您正在开发一个基于“iPhone 14 Mini”的应用程序，那么在“iPhone 14 Pro Max”上，它会显得很小且难以使用。而在平板电脑上则显得很难看……

该库的解决办法如下。根据屏幕数据，您指定一个通用的测量单位——Mu。根据屏幕放大倍数，您会增加 Mu。因此，几乎所有小部件尺寸的操作都应基于 Mu。总而言之，在平板电脑上指定的 Mu 数量会更大，因此整个界面会更大，但由于一切都取决于 Mu，因此它是成比例的。

如何使用？

  1. 将您的 MaterialApp 包装在 MuScalingBuilder 中。
  2. 将参数传递给 MuScalingBuilder

  • conditions – Mu 的条件列表。

  • defaultValue – 如果所有条件都不满足，则 Mu 的值为。

      The conditions work like this:
  Mu is calculated by going through each condition sequentially in the list.
  If Mu finds a condition, it takes a value from it.
  If all the conditions do not fit, Mu is set to defaultValue.

示例

MuScalingBuilder(
    conditions: [
    MuCondition.side(
        mu: 4,
        minShortestSide: 400,
        maxShortestSide: 800,
    ),
    MuCondition.side(
        mu: 5,
        minShortestSide: 800,
        maxShortestSide: 1500,
    ),
  ],
  defaultValue: 4,
  child: const MyApp(),
),
  1. 为具有 num 扩展的小部件使用 Mu

SizedBox(
    height: 8.mu,
),
  1. 为具有扩展的 TextStyle 或 TextTheme 使用 Mu

TextStyle(fontSize: 14).scale((fontSize, mu) => fontSize * mu / 3.5);
TextTheme().scale((fontSize, mu) => fontSize * mu / 3.5);

重要提示

  • 用于调整文本样式大小的函数不是通用的，您可以自己定义。它的存在是为了将文本大小调整到 Mu，而不是让文本超出大小。
  • 如果 TextStyle 没有设置字体大小，则不能使用 .scale()。（如果您想直接使用，我推荐 Typography 类）。
  1. 尽情享用吧！

贡献 

我们欢迎您的贡献！以下是您可以提供帮助的方式：

  • 报告难以实现的错误和场景
  • 报告文档中不清楚的部分
  • 修正错别字/语法错误
  • 更新文档/添加示例
  • 通过提交拉取请求来实现新功能

GitHub

查看 Github