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

news2024/11/23 7:39:04

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 {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: DialogExample(),
    );
  }
}

第二步：调用BottomSheet

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

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class BottomSheetExample extends StatelessWidget {
  GlobalKey<NavigatorState> _navKey = GlobalKey();

  @override
  Widget 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"))
          ],
        ),
      ),
    );
  }
}

效果展示

BottomSheet属性和说明

序列号	字段	属性	描述
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退出时的动画时间