颤振-缩放其子级时，Transform.scale小部件的大小不变

Question

我有一个要缩放的小部件A（像素完美）。根据设备的显示宽度，A的大小应增加或减小。我尝试使用Transform.scale小部件来更改A的大小。这很好用，但是Transform.scale小部件的大小永远不会改变。它始终与A的原始大小匹配（不缩放）。 有没有办法强迫Transform.scale始终采用其子代的大小？还是有替代方法？

您可以在此处找到显示当前情况和所需情况的图像

编辑： 小部件A及其子项应均匀缩小/增长。它们之间的比率不应改变。

这是我目前尝试的代码

_buildWidgetA(scalingFactor) {
  return Transform.scale(
    scale: scalingFactor,
    child: A(),
  );
}

Answer 1

由于@LOfG的输入，我了解到您无法使用Transform.scale小部件实现所需的行为。不幸的是，此小部件不会更改其大小以匹配缩放后的子代的尺寸，但将始终保留原始未缩放子代的宽度和高度。

我找到了另一个小部件FittedBox，通过它可以实现所需的行为。使用FittedBox时，您没有像使用Transform.scale那样定义缩放比例。您宁可将FittedBox放在Container内并定义其宽度或高度或两者。然后将FittedBox的子级缩放以匹配父级Container。

https://api.flutter.dev/flutter/widgets/FittedBox-class.html

_buildWidgetA(width, height) {
    return Container(
        width: width,
        height: height,
        child: FittedBox(
            child: A(),
        ),
    );
}

Answer 2

要根据设备的宽度缩放窗口小部件，可以使用Media Query更改比例：

第一种方法：

@override
Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width; //getting the current width

  return Scaffold(
    body: Transform.scale(
      scale: width <= 420 ? 0.5 : 0.8,
      child: Align(
        child: Container(
          alignment: Alignment.center,
          width: 420,
          height: 420,
          color: Colors.red,
          child: Text('Example', style: TextStyle(fontSize: 50),),
        ),
      ),
    )
  );
}

第二种方法：

Scaffold(
  body: Container(
    alignment: Alignment.center,
    width: width * 0.5,
    height: width * 0.5,
    color: Colors.green,
    child: Text(
      'Example Text',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: width * 0.1,
      ),
    ),
  ),
);