flutter - 显示带有自定义动画的模态底页

Question

我在 Flutter 中玩弄 showModalBottomSheet()，我正在考虑从底部动画更改默认幻灯片。翻看flutter documentation我看到实际上有一个接受动画作为参数的 BottomSheet 类，但是根据页面，showModalBottomSheet() 是更可取的。

是否可以通过某种方式控制动画？我只需要更改默认曲线和持续时间。

谢谢

Answer 1

您可以使用 AnimationController drive修改动画曲线的方法，以及duration和 reverseDuration设置动画将持续多长时间。如果您使用的是 StatefulWidget，这些可以在您的 initState() 上声明。

late AnimationController controller;

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

  controller = BottomSheet.createAnimationController(this);
  
  // Animation duration for displaying the BottomSheet
  controller.duration = const Duration(seconds: 1);
  
  // Animation duration for retracting the BottomSheet
  controller.reverseDuration = const Duration(seconds: 1);
  // Set animation curve duration for the BottomSheet
  controller.drive(CurveTween(curve: Curves.easeIn));
}

然后配置BottomSheet transtionAnimationController

showModalBottomSheet(
  transitionAnimationController: controller,
  builder: (BuildContext context) {
    return ...
  }
)

这是一个您可以试用的示例。

import 'package:flutter/material.dart';

class BottomSheetAnimation extends StatefulWidget {
  const BottomSheetAnimation({Key? key}) : super(key: key);

  @override
  _BottomSheetAnimationState createState() => _BottomSheetAnimationState();
}

class _BottomSheetAnimationState extends State<BottomSheetAnimation>
    with TickerProviderStateMixin {
  late AnimationController controller;

  @override
  initState() {
    super.initState();
    controller = BottomSheet.createAnimationController(this);
    // Animation duration for displaying the BottomSheet
    controller.duration = const Duration(seconds: 1);
    // Animation duration for retracting the BottomSheet
    controller.reverseDuration = const Duration(seconds: 1);
    // Set animation curve duration for the BottomSheet
    controller.drive(CurveTween(curve: Curves.easeIn));
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheet',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('BottomSheet'),
        ),
        body: Center(
          child: TextButton(
            child: const Text("Show bottom sheet"),
            onPressed: () {
              showModalBottomSheet(
                context: context,
                transitionAnimationController: controller,
                builder: (BuildContext context) {
                  return const SizedBox(
                    height: 64,
                    child: Text('Your bottom sheet'),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

演示