我正在尝试创建一个翻转效果,但在开始动画之前,我试图让转换保持在容器的中心。
但即使使用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),
),
),
)
)
],
),
),
);
}
}
Transform不会影响孩子的布局,只影响孩子的绘画方式。
如果你想用你的Transform
进行缩放,你可以通过alignment: FractionalOffset.center
。
如果您想要使用布局基元来居中项目,则可以使用FractionallySizedBox
而不是Transform
。
有关如何设置翻转效果动画的完整示例,请参阅我对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),
),
),
)
)
],
),
),
);
}
}
只需将其添加到您的容器中:
alignment: FractionalOffset.center