Flutter - 在容器中心变换比例
Flutter - Transform scale in center of Container
我正在尝试创建翻转效果,但在开始制作动画之前,我试图让变换保持在容器的中心。
但即使使用 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
。
有关如何制作翻转效果动画的完整示例,请参阅我对 的回答。
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
我正在尝试创建翻转效果,但在开始制作动画之前,我试图让变换保持在容器的中心。
但即使使用 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
。
有关如何制作翻转效果动画的完整示例,请参阅我对
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