📅  最后修改于: 2023-12-03 15:08:06.776000             🧑  作者: Mango
要创建一个拥有两个孩子的行,我们需要使用Flutter中的Row
widget。Row
是一个线性布局,在默认情况下,它的孩子将水平排列,但我们可以通过设置crossAxisAlignment
和mainAxisAlignment
属性来改变它们的对齐方式和分布。
为了让我们的行出现颤动,我们可以使用Flutter中的AnimatedContainer
widget,同时使用一个带有无限循环的Tween
,在Container
的宽度上创建动画。以橙色为背景色:
class ShakyRow extends StatefulWidget {
@override
_ShakyRowState createState() => _ShakyRowState();
}
class _ShakyRowState extends State<ShakyRow>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(milliseconds: 500),
vsync: this,
)..repeat(reverse: true);
_animation = Tween<double>(begin: 0, end: 10).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.linear,
),
);
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.orange,
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Transform.translate(
offset: Offset(_animation.value, 0),
child: Container(
width: 50,
height: 50,
color: Colors.white,
),
),
Transform.translate(
offset: Offset(-_animation.value, 0),
child: Container(
width: 50,
height: 50,
color: Colors.white,
),
),
],
);
},
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
在上面的代码中,我们创建了一个ShakyRow
Widget。当创建该Widget时,我们初始化了一个AnimationController
和一个线性渐变Tween来处理动画。 最后,在build()
方法中,我们创建了一个Row
,并将它的两个孩子(Container
)上下左右地移动了Animation的值,以实现颤动的效果。
此时,运行我们的ShakyRow
Widget,它应该会颤抖起来,彰显出我们的创意。