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

Posted 2023-04-13

【中文标题】如何将抽屉连接到颤动的动画图标按钮？

【英文标题】：How to connect drawer to animated icon button in flutter?

【发布时间】：2020-06-11 19:13:59

【问题描述】：

我想在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(),
        ),
      ),

    );
  

【问题讨论】：

恐怕你混淆了试图同时实现各种组件行为的术语。我建议查看材料规格以更好地了解它应该如何工作：material.io/components/navigation-drawer。例如，只有模态抽屉应该通过点击稀松布（抽屉外）或滑动来关闭 - 而您正在制作的东西没有稀松布（AppBar 始终可见）。

【参考方案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: ()); 内部被调用

【参考方案2】：

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

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

然后将其添加到 IconButton onPressed 方法

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