Flutter/Dart如何调整Modalbottomsheet动画速度? [英] Flutter/Dart How to adjust Modalbottomsheet animation speed?

问题描述

我阅读了这份参考书

https://api.flutter.dev/flutter/material/showModalBottomSheet.html

它说"transitionAnimationController参数可以被传递以定制模态底板的外观和行为.transitionAnimationController控制底部工作表的入口和出口动画(如果提供的话).

it says "transitionAnimationController parameters can be passed in to customize the appearance and behavior of modal bottom sheets. The transitionAnimationController controls the bottom sheet's entrance and exit animations if provided."

但是，我找不到任何transitionAnimationController的引用，

but, I couldn't find any reference of transitionAnimationController,

所以我的问题是，如何使用transitionAnimationController调整ModalBottomSheet动画(我要调整的进入和退出速度)?

谢谢.

推荐答案

如果您使用的是StatefulWidget，请添加和TickerProviderStateMixin 并使用 BottomSheet创建一个 AnimationController .createAnimationController(this).然后，您可以在AnimationController上设置 duration .在此示例中，我将持续时间设置为3秒.

If you are using a StatefulWidget add with TickerProviderStateMixin and create an AnimationController with BottomSheet.createAnimationController(this). You can then set the duration on the AnimationController. In this example I've set the duration to 3 seconds.

确保将AnimationController放置在 void dispose()

Make sure you dispose the AnimationController in void dispose ()

class MyModalBottomButton extends StatefulWidget {
  @override
  _MyModalBottomButtonState createState() => _MyModalBottomButtonState();
}

class _MyModalBottomButtonState extends State<MyModalBottomButton>
    with TickerProviderStateMixin {
  AnimationController controller;

  @override
  initState() {
    super.initState();
    controller =
        BottomSheet.createAnimationController(this);
    controller.duration = Duration(seconds: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      child: Text("Show bottom sheet"),
      onPressed: () => showModalBottomSheet(
        context: context,
        transitionAnimationController: controller,
        builder: (context) {
          return Container(
            child: Text("Your bottom sheet"),
          );
        },
      ),
    );
  }
}

这篇关于Flutter/Dart如何调整Modalbottomsheet动画速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！