Flutter Getx BottomSheet 的使用
Flutter Getx 对应视频教程访问:https://www.itying.com/goods-1176.html
我们可以通过GetX很轻松的调用bottomSheet(),而且无需传入context,下面我给出一个例子,使用GetX弹出bottomSheet并很轻松的实现切换主题 。
我们可以通过Get.bottomSheet() 来显示 BottomSheet ,通过Get.back()实现路由返回,通过Get.changeTheme(ThemeData.dark())切换皮肤主题,通过Get.isDarkMode判断主题样式。
ElevatedButton(
onPressed: () {
Get.bottomSheet(Container(
color: Get.isDarkMode ? Colors.black12 : Colors.white,
height: 200,
child: Column(
children: [
ListTile(
leading: Icon(Icons.wb_sunny_outlined,
color:
Get.isDarkMode ? Colors.white : Colors.black),
title: Text("白天模式",
style: TextStyle(
color: Get.isDarkMode
? Colors.white
: Colors.black)),
onTap: () {
Get.changeTheme(ThemeData.light());
Get.back();
},
),
ListTile(
leading: Icon(Icons.wb_sunny,
color:
Get.isDarkMode ? Colors.white : Colors.black),
title: Text("黑夜模式",
style: TextStyle(
color: Get.isDarkMode
? Colors.white
: Colors.black)),
onTap: () {
Get.changeTheme(ThemeData.dark());
Get.back();
},
)
],
),
));
},
child: const Text("Show BottomSheet"))
BottomSheet属性和说明
| 字段 | 属性 | 描述 |
|---|---|---|
| bottomsheet | Widget | 弹出的Widget组件 |
| backgroundColor | Color | bottomsheet的背景颜色 |
| elevation | double | bottomsheet的阴影 |
| persistent | bool | 是否添加到路由中 |
| shape | ShapeBorder | 边框形状,一般用于圆角效果 |
| clipBehavior | Clip | 裁剪的方式 |
| barrierColor | Color | 弹出层的背景颜色 |
| ignoreSafeArea | bool | 是否忽略安全适配 |
| isScrollControlled | bool | 是否支持全屏弹出,默认false |
| useRootNavigator | bool | 是否使用根导航 |
| isDismissible | bool | 点击背景是否可关闭,默认ture |
| enableDrag | bool | 是否可以拖动关闭,默认true |
| settings | RouteSettings | 路由设置 |
| enterBottomSheetDuration | Duration | bottomsheet进入时的动画时间 |
| exitBottomSheetDuration | Duration | bottomsheet退出时的动画时间 |
更多关于Flutter Getx BottomSheet 的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

