Flutter学习-GetX-06 免context导航

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

本文主要介绍下GetX中的一些拓展：免context导航，包括snackBar，Dialogs，BottomSheets。

在GetX中也封装了些有用的小功能，免context导航。一些弹出框和选择框，我们没有特别的样式要求可以使用一起看下效果吧。

1.SnackBar

用Flutter创建一个简单的SnackBar，你必须获得Scaffold的context，或者你必须使用一个GlobalKey附加到你的Scaffold上。

final snackBar = SnackBar(
  content: const Text('这是一个标题'),
  action: SnackBarAction(
      label: '内容：测试通知',
      onPressed: (){}
  ),
)
// 在小组件树中找到脚手架并使用它显示一个SnackBars。

ScaffoldMessenger.of(context).showSnackBar(snackBar);

复制代码

系统默认在底部展示，有点类似安卓的风格

使用Getx的话，效果有点类似iOS的通知栏

 Get.snackbar('这是一个标题', '内容：测试通知');
复制代码

有了Get，你所要做的就是在你代码的任何地方调用你的Get.snackbar，或者按照你的意愿定制它。

你想要系统底部的效果的话，使用rawSnackbar，可以定义你想要的样式

Get.rawSnackbar(title: '这是一个标题', message:'内容：测试通知');
复制代码

2.Dialogs

使用系统AlertDialog

showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text('提示'),
        content: Text('确认删除吗？'),
        actions: <Widget>[
          ElevatedButton(child: Text('取消'),onPressed: (){},),
          ElevatedButton(child: Text('确认'),onPressed: (){},),
        ],
      );
    });
复制代码

打开默认Dialogs：

Get.defaultDialog(
    onConfirm: () {
      print("object");
      Get.back();
    },
    middleText: "Dialog made in 3 lines of code",
);
复制代码

对于所有其他的FlutterDialogs小部件，包括cupertinos，你可以使用Get.overlayContext来代替context，并在你的代码中任何地方打开它。对于不使用Overlay的小组件，你可以使用Get.context。这两个context在99%的情况下都可以代替你的UIcontext，除了在没有导航context的情况下使用 inheritedWidget的情况。

3.BottomSheets

Get.bottomSheet类似于showModalBottomSheet，但不需要context：

Get.bottomSheet(
    Container(
      color: Colors.white,
      child: Wrap(
        children: <Widget>[
          ListTile(

              leading: const Icon(Icons.music_note),
              title: const Text('Music'),
              onTap: () {}
          ),
          ListTile(
            leading: const Icon(Icons.videocam),
            title: const Text('Video'),
            onTap: () {},
          ),
        ],
      ),
    )
);
复制代码

系统的showBottomSheet：

showBottomSheet(
    context: context,
    builder: (context) {
      return Container(height: 200, color: Colors.red);
    });
复制代码

展示一个区域，设置其背景颜色、阴影值、形状。

4.小结

相比系统我们使用Get在对脚手架导航的时候，避免了context的传递，方便我们在controller中处理逻辑展示，同时我们使用系统的话Get.context也很方便。