Flutter中GetX系列四--BottomSheet(底部弹框)

BottomSheet介绍

BottomSheet 是底部弹出的一个组件，常用于单选、验证码二次校验弹窗等，GetX的BottomSheet底部弹出是自定义通过路由push的方法实现底部弹窗的一个效果。

BottomSheet使用

我们可以通过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(),);}
}

第二步：调用BottomSheet

我们可以通过Get.bottomSheet() 来显示 BottomSheet ，如下所示,其中

 Get.isDarkMode可以用来判断是否是夜晚模式
  Get.changeTheme(ThemeData.light())用来改变当前的主题模式

import 'package:flutter/material.dart';
import 'package:get/get.dart';class BottomSheetExample extends StatelessWidget {GlobalKey<NavigatorState> _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.isDarkMode用来判断是否是夜晚模式Get.changeTheme(ThemeData.light());},),ListTile(leading: Icon(Icons.wb_sunny),title: Text("黑夜模式"),onTap: () {//改变主题模式(白天模式还是夜晚模式)Get.changeTheme(ThemeData.dark());},)],),));}, child: Text("Bottom Sheet"))],),),);}
}

效果展示

BottomSheet属性和说明