Flutter 子部件的 Transform.scale 不按比例缩放，为什么？

Question

我有一个基本的标志小部件，这里有代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Flag(),
      ),
    );
  }
}

class Flag extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var scaleFactor = 1.0;

    final flag = Transform.scale(
      scale: scaleFactor,
      child: AspectRatio(
        aspectRatio: 5 / 3,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(width: 2, color: Colors.black),
          ),
          child: Center(
            child: Container(
              height: 400,
              width: 150,
              color: Colors.purple,
            ),
          ),
        ),
      ),
    );

    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) => flag,
    );
  }
}

它看起来像这样：

如果我将 scaleFactor 更改为 0.5，它会按预期缩放：

但是，如果我将模拟器旋转到横向，比例就会关闭：

如果我使条纹与横向视图成比例（例如将条纹宽度更改为 250），它在纵向模式下会变得太大：

无论设备大小如何，如何确保紫色条纹占用相同比例的空间？

该标志将变得更加复杂，因此我不想使用 MediaQuery.of(context).size 来获取设备宽度并计算每个子小部件的百分比......

我需要告诉我的小部件它的“规范”大小吗？ 我需要将 scaleFactor 传递给每个子小部件吗？

任何想法都非常感谢:)

Answer 1

所以，我看到了两种解决这个问题的方法，这取决于你的最终目标是什么。 我认为第一个可能是您真正想要的。

1) 对标志的每个部分使用Row和Expanded小部件， flex为 1。 AspectRatio将保持纵横比固定，因此容器的比例应该保持不变。 由于默认的 flex 因子无论如何都是 1，因此您也可以将其省略。 如果您需要白色部分是透明的，只需给Colors.transparent作为颜色。

class Flag extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var scaleFactor = 1.0;

    final flag = Transform.scale(
      scale: scaleFactor,
      child: AspectRatio(
        aspectRatio: 5 / 3,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(width: 2, color: Colors.black),
          ),
          child: Row(
            children: <Widget>[
              Expanded(
                flex:1,
                child: Container(
                  color: Colors.white,
                ),
              ),
              Expanded(
                flex:1,
                child: Container(
                  color: Colors.purple,
                ),
              ),
              Expanded(
                flex:1,
                child: Container(
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );

    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) => flag,
    );
  }
}

2）您可以使用Transform小部件缩放中心的内容，但这会挤压您放入其中的任何内容，因此这可能不是您想要的。

class Flag extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var scaleFactor = 1.0;

    final flag = Transform.scale(
      scale: scaleFactor,
      child: AspectRatio(
        aspectRatio: 5 / 3,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(width: 2, color: Colors.black),
          ),
          child: Center(
            child: Transform(
              transform: Matrix4.diagonal3Values(0.33, 1.0, 1.0),
              alignment: Alignment.bottomCenter,
              child: Container(
                color: Colors.purple,
              ),
            ),
          ),
        ),
      ),
    );

    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) => flag,
    );
  }
}