4

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

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

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

在此处输入图像描述

这是我目前尝试的代码

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

2 回答 2

8

感谢@LOfG 的输入，我了解到您无法使用Transform.scale小部件实现所需的行为。不幸的是，这个小部件不会改变它的大小来匹配缩放的孩子的尺寸，但会始终保持原始的、未缩放的孩子的宽度和高度。

我找到了另一个小部件 ， FittedBox我通过它获得了所需的行为。使用 时FittedBox，您不必像使用 那样定义比例因子Transform.scale。您宁愿放入FittedBoxaContainer并定义其宽度或高度或两者兼而有之。FittedBox然后缩放的子级以匹配父级Container。

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

_buildWidgetA(width, height) {
    return Container(
        width: width,
        height: height,
        child: FittedBox(
            child: A(),
        ),
    );
}
于 2020-05-07T07:53:08.247 回答
0

要根据设备的宽度缩放小部件，您可以使用媒体查询来更改比例：

第一种方法：

@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,
      ),
    ),
  ),
);
于 2020-05-05T16:18:22.433 回答