Flutter - 在容器中心变换比例

Question

我正在尝试创建一个翻转效果，但在开始动画之前，我试图让转换保持在容器的中心。

但即使使用FractionalOffset(0.5, 0.5)或Center()包装Transform()结果仍保留在Container的顶部，如下图所示。

你能帮我把它放在容器的中央吗？

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              alignment: new FractionalOffset(0.5, 0.5),
              height: 144.0,
              width: 360.0,
              decoration: new BoxDecoration(
                border: new Border.all(color: new Color(0xFF9E9E9E))
              ),
              child: new Transform(
                transform: new Matrix4.identity()..scale(1.0, 0.05),   
                  child: new Container(
                  decoration: new BoxDecoration(
                    color: new Color(0xFF005CA9),        
                  ),        
                ), 
              )         
            )         
          ],
        ),
      ),
    );
  }
}

Answer 1

Transform不会影响其子项的布局，它只会影响子项的绘制方式。

如果你想用你的Transform进行缩放，你可以传递一个alignment: FractionalOffset.center 。

如果您想使用布局原语将项目居中，则可以使用FractionallySizedBox而不是Transform 。

有关如何制作翻转效果动画的完整示例，请参阅我对您的其他问题的回答。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              alignment: new FractionalOffset(0.5, 0.5),
              height: 144.0,
              width: 360.0,
              decoration: new BoxDecoration(
                border: new Border.all(color: new Color(0xFF9E9E9E))
              ),
              child: new Transform(
                alignment: FractionalOffset.center,
                transform: new Matrix4.identity()..scale(1.0, 0.05),
                child: new Container(
                  decoration: new BoxDecoration(
                    color: new Color(0xFF005CA9),
                  ),
                ),
              )
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

只需将其添加到您的容器中：

alignment: FractionalOffset.center