模态底部工作表
Flutter | 创建高级模态底部导航栏。Material、Cupertino 或您自己的风格。
| Cupertino模态 | 多个模态 | Material模态 | Bar模态 | 创建您自己的 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
第一步
如何安装？ 遵循说明
Material模态底部工作表
showMaterialModalBottomSheet(
context: context,
builder: (context, scrollController) => Container(),
})
为什么使用它而不是Flutter的showModalBottomSheet？
showMaterialModalBottomSheet支持通过向下拖动关闭底部工作表，即使内部有滚动视图。
showModalBottomSheet与滚动视图无法正常工作
所有模态底部工作表的通用参数
| 参数 | 描述 |
|---|---|
| bool expand = false | expand参数指定模态底部工作表是否全屏显示，还是适应其子内容。 |
| bool useRootNavigator = false | useRootNavigator参数在设置为true时，确保使用根导航器来显示底部工作表。当一个模态底部工作表需要显示在所有其他内容之上，但调用者位于另一个Navigator内部时，这很有用。 |
| bool isDismissible = true | isDismissible参数指定用户点击遮罩层时底部工作表是否会被关闭。 |
| Color barrierColor | barrierColor参数控制此路由的遮罩层的颜色。 |
| bool enableDrag = true | enableDrag参数指定底部工作表是否可以通过上下拖动并向下轻扫来关闭。 |
| AnimationController secondAnimation | secondAnimation参数允许您提供一个动画控制器，用于动画化模态路由的推入/弹出。建议不要使用此参数，它可能在未来版本中被移除。 |
| bool bounce = false | enableDrag参数指定底部工作表在拖动时是否可以超出顶部边界。 |
Material参数
可选的backgroundColor、elevation、shape和clipBehavior参数可以传递以自定义Material底部工作表的外观和行为。
Cupertino模态底部工作表
iOS 13带来了令人惊叹的新模态导航，现在可以在Flutter中使用。
showCupertinoModalBottomSheet(
context: context,
builder: (context, scrollController) => Container(),
})
请参阅上面Material部分中的通用参数。
Cupertino特定参数
可选的backgroundColor参数可以传递以自定义Cupertino底部工作表的背景颜色。
如果您想要一个模糊的透明背景，就像Cupertino照片共享示例一样，这很有用。
注意！: 要动画化前一个路由，需要进行一些更改。
为什么？
MaterialPageRoute和CupertinoPageRoute不允许与不同类型的路由进行动画转换。
有两种选择
选项1。推荐。
将您当前的路由类替换为MaterialWithModalsPageRoute。
请注意，此路由类型与MaterialPageRoute的行为相同，并支持自定义PageTransitionsBuilder和PageTransitionsTheme。
如何更改我的路由类？查看案例。
- 使用Navigator.of(context).push
Navigator.of(context).push(MaterialPageRoute(builder: (context) => Container()));`
将其替换为
Navigator.of(context).push(MaterialWithModalsPageRoute(builder: (context) => Container()));
使用MaterialApp、CupertinoApp或Navigator的onGenerateRoute参数。
onGenerateRoute: (settings) {
...
return MaterialPageRoute(settings: settings, builder: (context) => Container());
},
替换为
onGenerateRoute: (settings) {
...
return MaterialWithModalsPageRoute(settings: settings, builder: (context) => Container());
},
使用WidgetApp的pageRouteBuilder参数。
pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) => MaterialWithModalsPageRoute<T>(settings: settings, builder: builder)
使用MaterialApp或CupertinoApp的routes参数。
不幸的是，这些路由分别是MaterialPageRoute和CupertinoPageRoute，无法更改。
您可以通过前面提到的方法之一来更改调用前一个路由的方式，或者尝试选项2。
选项2。
- 将前一个路由包装在
CupertinoScaffold中。
使用MaterialApp或CupertinoApp的routes参数的示例。
routes: <String, WidgetBuilder>{
'/previous_route_where_you_push_modal': (BuildContext context) => CupertinoScaffold(body: Container()),
},
- 使用此方法推入模态。
CupertinoScaffold.showCupertinoModalBottomSheet(context:context, builder: (context) => Container())
这两种选项将无法正确协同工作。
它支持原生功能，如反弹、模糊背景、暗模式、堆叠模态和内部导航。
在模态底部工作表中推入新视图。
a. 如果您想推入一个新的模态底部工作表，只需再次调用showCupertinoModalBottomSheet（适用于两种选项）。
b. 对于内部导航，请在内部添加一个新的Navigator或CupertinoTabScaffold。
c. 它还支持Flutter功能，如WillPopScope，以防止模态底部工作表关闭。
构建其他底部工作表。
尝试showBarModalBottomSheet，以获得Facebook或Slack使用的外观的底部工作表。
在示例项目中检查showAvatarModalBottomSheet，了解如何创建自己的ModalBottomSheet。
问题
提问并@jamesblasco提及我。
发现问题或有建议？
路线图
-
[ ] 支持通过快速拖动带有滚动视图的模态来关闭。
-
[ ] 改进用户未拖动时的动画曲线。
-
[ ] 允许设置底部工作表的初始大小。
-
[ ] 支持Hero动画 Pull Request #2
