根据父级大小按比例缩小小部件中的所有子级

Posted 2023-02-23

【中文标题】根据父级大小按比例缩小小部件中的所有子级

【英文标题】：Scale down all children in widget by a factor based on the parent size

【发布时间】：2020-05-12 18:38:49

【问题描述】：

在 Flutter 中，我正在实现“新功能”屏幕，它将显示应用程序中真实屏幕的预览。 为此，我在“新增功能”流程中重复使用屏幕Widgets。 预览将以较小的Container 显示，不会覆盖整个屏幕。

我想缩小此Container 内所有小部件的文本大小、行高等，以匹配较小的范围。 有没有办法在不单独为每个 Widget 单独添加较小样式的情况下做到这一点？

例如无论主题中设置的大小如何，将所有 fontSizes 缩小 20% 以获得 Widget child

【问题讨论】：

我通常使用 MediaQuery 来根据屏幕尺寸缩小字体，而不是孩子的父母，发现这可能与您的问题有关***.com/questions/41558368/…

谢谢，这是一个可行的解决方案，但不能应用于我的案例，因为所有字体都是由固定大小定义的

【参考方案1】：

我找到了解决方案。使用Transform.scale(...) 包裹子小部件树将根据提供的比例因子将所有小部件向下缩放。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Transform.scale(
      scale: 0.9,
      child: MyScaledWidgetTree(),
     ),
     Container(
      child: ...,
     ),
   ],
)

【讨论】：

我们如何使刻度动态化，以便仅在溢出时缩小？此外，按比例缩小的值应该足以修复溢出。 IE。尽可能大而不会溢出。我们如何找到这个价值？