Flutter调整动画大小覆盖内的容器高度

时间:2020-10-14 13:29:34

标签: flutter flutter-animation

我构建了一个简单的代码来知道如何使用Overlay带有动画的菜单,在此代码中,当我单击按钮时,我们可以看到简单的Container以及其他一些小部件,我很累为此设置高度动画,这是我的问题,在Container内的Overlay中,我有一些小部件,例如ListTile,此项的数量是可选的

我们如何在没有height参数的情况下通过指定子项计数来调整Container的高度动画大小

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overlay Menu',
      home: OverlayMenu(),
    );
  }
}

class OverlayMenu extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _OverlayMenu();
}

class _OverlayMenu extends State<OverlayMenu> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 250));
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text('Click Here'),
          onPressed: () {
            return _showOverlayHomeMenu(context, _animationController);
          },
        ),
      ),
    );
  }

  Future<void> _showOverlayHomeMenu(BuildContext context, AnimationController animationController) async {
    final OverlayState _overlayState = Overlay.of(context);
    final OverlayEntry _overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
          top: kToolbarHeight - 20,
          right: 20.0,
          child: Card(
            elevation: 8.0,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
            color: const Color(0xFF32313C),
            child: AnimatedSize(
              vsync: this,
              curve: Curves.fastLinearToSlowEaseIn,
              duration: const Duration(milliseconds: 2000),
              child: Container(
                width: 200.0,
                height: 300.0, //should be optional with children size
                child: const ListTile(
                  title: Text(
                    'aaaaaaa',
                    style: TextStyle(color: Colors.white),
                  ),
                  leading: Icon(
                    Icons.assessment,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ));
    });

    _animationController.addListener(() {
      _overlayState.setState(() {});
    });

    _overlayState.insert(_overlayEntry);
    _animationController.forward();
    await Future.delayed(const Duration(milliseconds: 3500));
    _animationController.reverse();

    _overlayEntry.remove();
  }
}

0 个答案:

没有答案