显示带有自定义动画的模态下表
显示带有自定义动画的模态下表
提问于 2019-11-22 02:08:08
我在颤栗中玩showModalBottomSheet()，我正在考虑改变底部动画中的默认幻灯片。纵观颤振文献，我发现实际上有一个BottomSheet类接受动画作为参数，但是，相应地，对于页面来说，showModalBottomSheet()更可取。
是否有可能在某种程度上控制动画？我只需要改变默认的曲线和持续时间。
谢谢
Stack Overflow用户
发布于 2022-05-02 22:08:26
您可以使用AnimationController 驾驶方法来修改动画曲线，使用持续时间和reverseDuration来设置动画的持续时间。如果使用的是initState()，则可以在StatefulWidget上声明这些信息。
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'),
);
},
);
},
),
),
),
);
}
}演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58986448
复制相关文章
相似问题
腾讯云开发者
