dart - 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而不是 变换。

有关如何制作翻转效果动画的完整示例，请参阅我对 your other question 的回答。 .

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),
                  ),
                ),
              )
            )
          ],
        ),
      ),
    );
  }
}