animatedPositioned 在 Flutter 上没有动画

Question

我需要为小部件设置动画，我使用了 AnimatedPositioned。但不是动画。只是改变位置没有动画

完整代码

Column(
      children: <Widget>[
        Container(
          height: 50,
            width: width,
            color: Palette.white,
          child: Padding(
            padding: const EdgeInsets.only(left:20.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: 200,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Palette.lightSilver,
                    borderRadius: BorderRadius.all(Radius.circular(20))
                  ),
                  child: Stack(
                    children: <Widget>[
                      AnimatedPositioned(
                        right:check? 0:null,
                          left:check?null: 0,
                          child: InkWell(
                            onTap: (){
                              setState(() =>
                                check = !check
                              );
                            },
                            child: Container(
                              width: 110,
                              height: 40,
                              decoration: BoxDecoration(
                                  color: Palette.darkSilver2,
                                  borderRadius: BorderRadius.all(Radius.circular(20))
                              ),
                            ),
                          ),
                        duration: const Duration(milliseconds: 50000),
                        curve: Curves.bounceOut,
                      )
                    ],
                  ),
                ),
              ],
            ),
          )
        ),

Answer 1

您只需要始终将 右 和 左 侧的距离设置为不等于 null，这样容器就不会t 跳转，我稍微修改了一下代码（试试看）：

Column(
      children: <Widget>[
        Container(
            height: 50,
            width: 400,
            color: Colors.green,
            child: Padding(
              padding: const EdgeInsets.only(left: 20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: 300,
                    height: 40,
                    decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius:
                            BorderRadius.all(Radius.circular(20))),
                    child: Stack(
                      children: <Widget>[
                        AnimatedPositioned(
                          right: check ? 0 : 200,
                          left: check ? 200 : 0,
                          onEnd: () {
                            print('done');
                          },
                          child: InkWell(
                            onTap: () {
                              setState(() => check = !check);
                            },
                            child: Container(
                              width: 50,
                              height: 40,
                              decoration: BoxDecoration(
                                  color: Colors.black54,
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(20))),
                            ),
                          ),
                          duration: const Duration(milliseconds: 5000),
                          curve: Curves.bounceOut,
                        )
                      ],
                    ),
                  ),
                ],
              ),
            )),
      ],
    ),

Answer 2

您可以仅使用动画容器的左侧或右侧 属性 设置动画。

Container(
                  width: 200,
                  height: 60,
                  decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.all(Radius.circular(20))),
                  child: Stack(
                    children: <Widget>[
                      AnimatedPositioned(
                        left: check
                            ? 90
                            : 0, // here 90 is (200(above container)-110(container which is animating))
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              check = !check;
                            });
                          },
                          child: Container(
                            width: 110,
                            height: 40,
                            decoration: BoxDecoration(
                                color: Colors.teal,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(20))),
                          ),
                        ),
                        duration: const Duration(seconds: 1),
                        curve: Curves.bounceOut,
                      ),
                    ],
                  ),
                ),