BottomSheet 是底部弹出的一个组件,常用于单选、验证码二次校验弹窗等,GetX的BottomSheet底部弹出是自定义通过路由push的方法实现底部弹窗的一个效果。
我们可以通过GetX很轻松的调用bottomSheet(),而且无需传入context,下面我给出一个例子,使用GetX弹出bottomSheet并很轻松的实现切换主题
当我们导入依赖后,在应用程序顶层把GetMaterialApp 作为顶层,如下所示
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/DialogExample/DialogExample.dart';
import 'package:get/get.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(title: "GetX",home: DialogExample(),);}
}
我们可以通过Get.bottomSheet() 来显示 BottomSheet ,如下所示
import 'package:flutter/material.dart';
import 'package:get/get.dart';class BottomSheetExample extends StatelessWidget {GlobalKey _navKey = GlobalKey();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("GetX Title"),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [ElevatedButton(onPressed: () {Get.bottomSheet(Container(child: Wrap(children: [ListTile(leading: Icon(Icons.wb_sunny_outlined),title: Text("白天模式"),onTap: () {Get.changeTheme(ThemeData.light());},),ListTile(leading: Icon(Icons.wb_sunny),title: Text("黑夜模式"),onTap: () {Get.changeTheme(ThemeData.dark());},)],),));}, child: Text("Bottom Sheet"))],),),);}
}

| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | bottomsheet | Widget | 弹出的Widget组件 |
| 2 | backgroundColor | Color | bottomsheet的背景颜色 |
| 3 | elevation | double | bottomsheet的阴影 |
| 4 | persistent | bool | 是否添加到路由中 |
| 5 | shape | ShapeBorder | 边框形状,一般用于圆角效果 |
| 6 | clipBehavior | Clip | 裁剪的方式 |
| 7 | barrierColor | Color | 弹出层的背景颜色 |
| 8 | ignoreSafeArea | bool | 是否忽略安全适配 |
| 9 | isScrollControlled | bool | 是否支持全屏弹出,默认false |
| 10 | useRootNavigator | bool | 是否使用根导航 |
| 11 | isDismissible | bool | 点击背景是否可关闭,默认ture |
| 12 | enableDrag | bool | 是否可以拖动关闭,默认true |
| 13 | settings | RouteSettings | 路由设置 |
| 14 | enterBottomSheetDuration | Duration | bottomsheet进入时的动画时间 |
| 15 | exitBottomSheetDuration | Duration | bottomsheet退出时的动画时间 |