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，则可以通过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),
                  ),
                ),
              )
            )
          ],
        ),
      ),
    );
  }
}