如何將抽屜連接到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();
        }