showBottomSheet 属性参数
时间: 2024-01-24 09:05:16 浏览: 76
Flutter质感设计之持久底部面板
5星 · 资源好评率100%
`showBottomSheet` 方法是 Flutter 中用于显示底部滑出面板的方法,它接受多个参数来控制底部滑出面板的外观和行为。以下是一些常用的参数:
- `context`:上下文对象,通常为当前 `BuildContext`。
- `builder`:底部滑出面板的构建器函数,返回一个 `Widget`。
- `backgroundColor`:底部滑出面板的背景色,通常为半透明色。
- `elevation`:底部滑出面板的高度,通常为 0。
- `shape`:底部滑出面板的形状,通常为 `RoundedRectangleBorder`。
- `isScrollControlled`:是否允许底部滑出面板上下滑动,通常为 `true`。
- `useRootNavigator`:是否使用根路由器来管理底部滑出面板,通常为 `true`。
- `isDismissible`:是否允许用户通过点击空白区域来关闭底部滑出面板,通常为 `true`。
- `enableDrag`:是否允许用户通过手势拖动底部滑出面板,通常为 `true`。
- `transitionAnimationController`:底部滑出面板的动画控制器,用于控制面板的进出动画。
- `transitionAnimationDuration`:底部滑出面板的动画持续时间,通常为 250 毫秒。
以下是一个示例,展示了如何使用 `showBottomSheet` 方法显示一个底部滑出面板:
```dart
showBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
color: Colors.white,
child: Center(
child: Text('这是一个底部滑出面板'),
),
);
},
backgroundColor: Colors.black.withOpacity(0.5),
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
isScrollControlled: true,
useRootNavigator: true,
isDismissible: true,
enableDrag: true,
transitionAnimationController: AnimationController(
vsync: this,
duration: Duration(milliseconds: 250),
),
transitionAnimationDuration: Duration(milliseconds: 250),
);
```
在上面的示例中,我们通过 `builder` 方法返回一个 200 像素高的白色 `Container`,并将其作为底部滑出面板的内容。我们将底部滑出面板的背景色设置为半透明的黑色,高度设置为 0,形状设置为圆角矩形,允许用户通过手势拖动面板,允许通过点击空白区域来关闭面板,动画持续时间为 250 毫秒。
阅读全文