在屏幕的底部是一个按钮。当按钮被按下时,一个底部的薄片应该在按钮后面向上滑动。
我没能把动画做好。我试着用堆栈。
在下面的抖动代码中,底部的表单没有从屏幕的底部向上滑动,而是从按钮的上方向上滑动。我该如何修复它?
import 'package:flutter/material.dart';
class BottomSheetExample extends StatefulWidget {
const BottomSheetExample({super.key});
@override
State<BottomSheetExample> createState() => _BottomSheetExampleState();
}
class _BottomSheetExampleState extends State<BottomSheetExample> {
@override
Widget build(BuildContext context) {
return const Scaffold(
backgroundColor: Colors.green,
bottomSheet: MyBottomSheet(),
body: Center(child: Text('Body')),
);
}
}
class MyBottomSheet extends StatefulWidget {
const MyBottomSheet({super.key});
@override
MyBottomSheetState createState() => MyBottomSheetState();
}
class MyBottomSheetState extends State<MyBottomSheet> {
double _size = 100;
bool _large = false;
void _updateSize() {
setState(() {
_large = !_large;
_size = _large ? 200 : 100;
});
}
@override
Widget build(BuildContext context) {
return BottomSheet(
onClosing: () {},
builder: (BuildContext context) => Stack(
children: [
AnimatedSize(
curve: Curves.elasticOut,
duration: const Duration(milliseconds: 2000),
child: Container(
color: Colors.amber,
height: _size,
padding: const EdgeInsets.all(20),
child: const Center(child: Text('Bottom Sheet')),
),
),
Positioned(
bottom: 10,
child: ElevatedButton(
onPressed: () => _updateSize(),
child: const Text("Toggle"),
),
),
],
),
);
}
}
1条答案
按热度按时间cidc1ykv1#
请试试这个。它很容易搞乱堆栈。我在这里使用
AnimatedContainer
是为了简单起见,但通常你也可以使用AnimatedSize
没有问题。如果你有任何问题,请随时问!