📜  在颤动中创建一个有两个孩子的行 (1)

📅  最后修改于: 2023-12-03 15:08:06.776000             🧑  作者: Mango

在颤动中创建一个有两个孩子的行

要创建一个拥有两个孩子的行,我们需要使用Flutter中的Rowwidget。Row是一个线性布局,在默认情况下,它的孩子将水平排列,但我们可以通过设置crossAxisAlignmentmainAxisAlignment属性来改变它们的对齐方式和分布。

为了让我们的行出现颤动,我们可以使用Flutter中的AnimatedContainerwidget,同时使用一个带有无限循环的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,它应该会颤抖起来,彰显出我们的创意。