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也很方便。