简体   繁体   English

Flutter/Dart 如何调整 Modalbottomsheet animation 速度?

[英]Flutter/Dart How to adjust Modalbottomsheet animation speed?

I read this reference我读了这个参考

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

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参数以自定义模态底部工作表的外观和行为。如果提供,则transitionAnimationController控制底部工作表的入口和退出动画。”

but, I couldn't find any reference of transitionAnimationController,但是,我找不到任何关于 transitionAnimationController 的参考,

so my question is, How can I adjust ModalBottomSheet Animation(entrance and exit speed that I want to adjust) with transitionAnimationController?所以我的问题是,如何使用 transitionAnimationController 调整 ModalBottomSheet 动画(我要调整的入口和出口速度)?

thank you.谢谢你。

If you are using a StatefulWidget add with TickerProviderStateMixin and create an AnimationController with BottomSheet.createAnimationController(this) .如果您使用 StatefulWidget 添加with TickerProviderStateMixin并使用BottomSheet.createAnimationController(this)创建一个AnimationController You can then set the duration on the AnimationController.然后,您可以在 AnimationController 上设置duration In this example I've set the duration to 3 seconds.在此示例中,我将持续时间设置为 3 秒。

Make sure you dispose the AnimationController in void dispose ()确保在void dispose ()中处理 AnimationController

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM