[英]Flutter - Set the scale of a widget
I am trying to create an animation that "pops" the widget to the front and returns to it我正在尝试创建一个动画,将小部件“弹出”到前面并返回到它
import "package:flutter/material.dart";
class ScoreCounter extends StatefulWidget {
@override
_ScoreCounter createState() => new _ScoreCounter();
}
class _ScoreCounter extends State<ScoreCounter> with SingleTickerProviderStateMixin{
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = new AnimationController(
duration: const Duration(seconds: 10),
vsync: this,
)..forward();
}
@override
build(BuildContext context){
return new AnimatedBuilder(
animation: _controller,
child: new Container(width: 200.0, height: 200.0, color: Colors.green),
builder: (BuildContext context, Widget child) {
//What to return that scales the element
},
);
}
}
For rotating, I would use a Transform and return a Matrix.对于旋转,我会使用 Transform 并返回一个矩阵。 But what should I return to accomplish the scaling animation?
但是我应该返回什么来完成缩放动画?
Thanks in advance提前致谢
Just as a alternative, to set just scale for a specific Widget
.作为替代方案,只为特定的
Widget
设置比例。
Transform.scale(
scale: 1.0,
child: Container(
height: 200.0,
width: 200.0,
color: Colors.pink,
),
),
If you're going to size your contents manually you could just read controller.value
in your builder function and use that to set the size of the container.如果您要手动调整内容大小,您只需在构建器函数中读取
controller.value
并使用它来设置容器的大小。
Alternatively, you could consider a pair of SizeTransition
s for each axis.或者,您可以为每个轴考虑一对
SizeTransition
。 The Align
class may also be useful because you can set a sizeFactor
in each dimension. Align
类也可能很有用,因为您可以在每个维度中设置一个sizeFactor
。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new HomePage(),
));
}
class HomePage extends StatefulWidget {
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.sort),
onPressed: () {},
),
body: new Center(
child: new ScoreCounter(),
),
);
}
}
class ScoreCounter extends StatefulWidget {
@override
_ScoreCounter createState() => new _ScoreCounter();
}
class _ScoreCounter extends State<ScoreCounter>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = new AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
)
..forward();
}
@override
build(BuildContext context){
return new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
double size = _controller.value * 200.0;
return new Container(width: size, height: size, color: Colors.green);
},
);
}
}
Simply add this method to your component只需将此方法添加到您的组件中
Matrix4 scaleXYZTransform({
double scaleX = 1.00,
double scaleY = 1.00,
double scaleZ = 1.00,
}) {
return Matrix4.diagonal3Values(scaleX, scaleY, scaleZ);
}
Now you can easily Scale any widget by wrapping it:现在您可以通过包装它轻松地缩放任何小部件:
Transform(
transform: scaleXYZTransform(scaleX: .5, scaleY: .5),
child: Container(
child: myAwesomeWidget(),
));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.