如何将抽屉连接到flutter中的动画图标按钮？

Question

我想在AppBar上设置动画按钮图标（始终可见），以便在我的应用程序中调用抽屉。 为了让 AppBar 即使在打开 Drawer 时也始终可见，我使用了这种方法：我必须将 AppBar 放到主 Scaffold 中，然后传递一个子项：Scaffold 并将 Drawer 放入其中。

我设法让按钮通过 IF 语句和_scaffoldKey.currentState工作。 所以按钮在打开和关闭抽屉时工作并从汉堡到箭头动画，但我也想在通过滑动打开/关闭抽屉时或在打开抽屉时通过点击外部抽屉来实现按钮动画。 有什么办法吗？

我是 Flutter 的初学者，这是我的部分代码：

class HomePage extends StatefulWidget {
  @override _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  bool isPlaying = false;
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  bool _isDrawerOpen = false;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
  }



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

  void _handleOnPressed() {
    setState(() {
      isPlaying = !isPlaying;
      isPlaying
          ? _animationController.forward()
          : _animationController.reverse();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      primary: true,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text(
          "Drawer animation",
          style: TextStyle(
              fontSize: 40,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.w600,
              color: Colors.black45),
        ),
        centerTitle: true,
        backgroundColor: Colors.amber,
        leading: IconButton(
          icon: AnimatedIcon(
              icon: AnimatedIcons.menu_arrow, progress: _animationController),
          onPressed: () {
            if (!_isDrawerOpen) {
              _scaffoldKey.currentState.openDrawer();
            } else {
              Navigator.pop(context);
            }
            setState(() {
              _isDrawerOpen = !_isDrawerOpen;
            });
            _handleOnPressed();
          },
        ),
      ),

      body: Scaffold(
        key: _scaffoldKey,
        drawer: Drawer(
                child: ListView(
                  children: <Widget>[
                    ListTile(
                      title: Text("prve"),
                    ),
                  ],
                ),
              ),


        body: Container(
          child: CustomButton(),
        ),
      ),

    );
  }
}

Answer 1

据我了解，您似乎希望在滑动抽屉时为按钮设置动画。 您可以在这里做的是在包含Drawer的Scaffold上添加onDrawerChanged 。 如果抽屉被打开或关闭，这应该检测手势。

Scaffold(
  key: _scaffoldKey,
  onDrawerChanged: (onDrawerChanged){
    debugPrint('onDrawerChanged? $onDrawerChanged');
    // onDrawerChanged is called on changes in drawer direction
    // true - gesture that the Drawer is being opened
    // false - gesture that the Drawer is being closed
    onDrawerChanged
        ? _animationController.forward()
        : _animationController.reverse();
  },
  ...
)

通过这个设置， _handleOnPressed()可以从在IconButton(onPressed: (){});内部调用中移除IconButton(onPressed: (){});

Answer 2

你可以像这样打开抽屉然后关闭

onDrawerChanged: (change) {
    setState(() {
      isplaying = !isplaying;
      isplaying
          ? animationController.forward()
          : animationController.reverse();
    });
  }

然后将其添加到IconButton onPressed方法

onPressed: () {
          Scaffold.of(context).openEndDrawer();
        }