使用Tween動(dòng)畫,改變控件距左距離
展開時(shí),展示菜單控件,動(dòng)畫正向執(zhí)行;收起后,動(dòng)畫反向執(zhí)行,隱藏菜單控件;

class SpreadWidget extends StatefulWidget {
  SpreadWidget({Key key}) : super(key: key);

  @override
  _SpreadWidgetState createState() => _SpreadWidgetState();
}

class _SpreadWidgetState extends State<SpreadWidget>
    with TickerProviderStateMixin {
  bool offstage = true;
  bool zhankai = false;

  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    controller = new AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    animation = new Tween(begin: 0.0, end: 150.0).animate(controller)
      ..addListener(() {
        if (animation.status == AnimationStatus.dismissed &&
            animation.value == 0.0) {
          offstage = !offstage;
        }
        setState(() => {});
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenUtil().screenWidth,
      height: 100,
      child: Stack(
        children: [
          Positioned(
              top: 10,
              left: 20,
              child: Text(
                "展開/收起",
                style: TextStyle(fontSize: 20),
              )),
          Positioned(
            top: 50,
            left: ((animation?.value ?? 150.0) > 150 ? 150 : animation?.value),
            child: Offstage(
              offstage: offstage,
              child: Image.asset(
              "jiaoyin.png",
                width: 50,
                height: 50,
              ),
            ),
          ),
          Positioned(
            top: 50,
            left: ((animation?.value ?? 100) > 100 ? 100 : animation?.value),
            child: Offstage(
              offstage: offstage,
              child: Image.asset(
                 "jiaoyin.png",
                width: 50,
                height: 50,
              ),
            ),
          ),
          Positioned(
            top: 50,
            left: ((animation?.value ?? 50.0) > 50 ? 50 : animation?.value),
            child: Offstage(
              offstage: offstage,
              child: Image.asset(
                "jiaoyin.png",
                width: 50,
                height: 50,
              ),
            ),
          ),
          Positioned(
            top: 50,
            left: 0,
            child: GestureDetector(
              onTap: () {
                setState(() {
                  zhankai = !zhankai;
                  if (!zhankai) {
                    //展開
                    offstage = !offstage;
                    //啟動(dòng)動(dòng)畫(正向執(zhí)行)
                    controller.forward();
                  } else {
                    controller.reverse();
                  }
                });
              },
              child: Image.asset(
                 "dongtai.png",
                width: 50,
                height: 50,
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}