如何在 Flutter 中收听抽屉打开/关闭动画

Posted 2023-02-23

【中文标题】如何在 Flutter 中收听抽屉打开/关闭动画

【英文标题】：How to listen to Drawer open/close animation in Flutter

【发布时间】：2019-04-18 01:49:15

【问题描述】：

作为 Flutter 的新手，我正在通过重新创建现有的 android 应用来进行学习练习。但是，我无法制作一个“旋转的、不断增长的主页图标”，它的动画应该与抽屉打开/关闭动画同步。

所需的抽屉/主页图标行为如下所示：

我在 Android 中实现了这个

DrawerListener.onDrawerSlide(View drawerView, float slideOffset) 

我在 Flutter 中执行此操作的简单方法是使用 ScaleTransition 和 RotationTransition 来监听打开/关闭 Drawer 的相同动画。

我可以看到 ScaffoldState 有一个 DrawerControllerState，但它是私有的。

final GlobalKey<DrawerControllerState> _drawerKey = new GlobalKey<DrawerControllerState>();

即使我能以某种方式访问​​ DrawerControllerState（我不知道如何），我也无法访问 _animationChanged() 和 _controller，因为它们都是 DrawerControllerState 的私有成员。

我觉得我以错误的方式来解决这个问题，并且有一种更好的方法，对 Flutter 来说更自然，但我看不到。

谁能描述一下 Flutter 的实现方式？

【问题讨论】：

github.com/flutter/flutter/issues/14510

你找到解决方案了吗，或者我也必须解决这个问题？？

@bihireboris 不，我从来没有解决过这个问题。对不起

【参考方案1】：

可以先参考其他人在***上的回复here

我的解决方案：

在 DrawerWidget 上获取抽​​屉状态

initState() : open drawer
dispose() : close drawer

DrawerService Provider 的流式抽屉状态

查看完整代码

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:provider/provider.dart';


void main() 
  runApp(
    MultiProvider(
      providers: [
        Provider(create: (_) => DrawerService()),
      ],
      child: MyApp(),
    ),
  );


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  DrawerService _drawerService;
  String drawerStatus = 'close';
  @override
  void initState() 
    super.initState();
    _drawerService = Provider.of(context, listen: false);
    _listenDrawerService();
  

  _listenDrawerService() 
    _drawerService.status.listen((status) 
      if(status) 
        drawerStatus = 'open';
       else 
        drawerStatus = 'close';
      
      setState(()  );
    );
  

  @override
  Widget build(BuildContext context) 
    Color bgColor = Colors.yellow;
    if(drawerStatus == 'open') 
      bgColor = Colors.red;
    

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: DrawerWidget(),
      body: Container(
        decoration: BoxDecoration(color: bgColor),
        height: 300,
        child: Center(child: Text(drawerStatus),),
      ),
    );
  



class DrawerWidget extends StatefulWidget 
  @override
  _DrawerWidgetState createState() => _DrawerWidgetState();


class _DrawerWidgetState extends State<DrawerWidget>   
  DrawerService _drawerService;

  @override
  void initState() 
    super.initState();
    _drawerService = Provider.of(context, listen: false);
    _drawerService.setIsOpenStatus(true);
  

  @override
  Widget build(BuildContext context) 
    return Drawer(
      child: Center(child: Text('drawer'),),
    );
  

  @override
  void dispose() 
    super.dispose();
    _drawerService.setIsOpenStatus(false);
  


class DrawerService 
  StreamController<bool> _statusController = StreamController.broadcast();
  Stream<bool> get status => _statusController.stream;

  setIsOpenStatus(bool openStatus) 
    _statusController.add(openStatus);
  

希望对身体有所帮助