Как слушать анимацию открытия / закрытия ящика во Flutter

Поскольку я новичок во 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?


flutter dart flutter-animation
person planktronic    schedule 15.11.2018    source источник
comment
github.com/flutter/flutter/issues/14510   -  person Günter Zöchbauer    schedule 15.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Сначала вы можете обратиться к ответам других людей в stackoverflow здесь

Мое решение:

получить статус ящика на DrawerWidget

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

Статус ящика потока по провайдеру DrawerService введите описание изображения здесь

посмотреть полный код

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);
  }
}

надеюсь помочь телу

person Hưng Trịnh    schedule 10.07.2020