我在 Flutter 中玩弄 showModalBottomSheet()
,我正在考虑从底部动画更改默认幻灯片。翻看flutter documentation我看到实际上有一个接受动画作为参数的 BottomSheet 类,但是根据页面,showModalBottomSheet()
是更可取的。
是否可以通过某种方式控制动画?我只需要更改默认曲线和持续时间。
谢谢
最佳答案
您可以使用 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'),
);
},
);
},
),
),
),
);
}
}
演示
关于flutter - 显示带有自定义动画的模态底页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58986448/