Flutter GetX - 路由管理

GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。

参考：

https://github.com/jonataslaw/getx/blob/master/documentation/zh_CN/route_management.md

路由管理

普通路由导航

导航到新的页面：

Get.to(NextScreen());

对应原生路由：

Navigator.push(context, MaterialPageRoute<void>(
  builder: (BuildContext context) {
    return NextScreen();
  },
));

返回上一页：

Get.back();

原生路由：

Navigator.pop(context);

进入下一个页面，但没有返回上一个页面的选项（用于SplashScreens，登录页面等）。

Get.off(NextScreen());

对应原生路由：

Navigator.pushReplacement(context, MaterialPageRoute<void>(
  builder: (BuildContext context) {
    return NextScreen();
  },
));

打开新页面并删除之前的所有路由

Get.offAll(NextScreen());

对应原生路由：

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute<void>(
    builder: (BuildContext context) {
      return NextScreen();
    },
  ),
  (Route<dynamic> route) => false,
);

导航到新页面，在返回时接收返回数据：

var data = await Get.to(NextScreen());

对应原生路由：

var data = await  Navigator.push(context, MaterialPageRoute<void>(
  builder: (BuildContext context) {
    return NextScreen();
  },
));

带返回值返回前一个路由，配合上面使用：

Get.back(result: 'success');

对应原生路由：

Navigator.pop(context, 'success');

别名路由导航

1、声明别名：

abstract class Routes {
  static const Initial = '/';
  static const NextScreen = '/NextScreen';
}

2、注册路由表：

abstract class AppPages {
  static final pages = [
    GetPage(
      name: Routes.Initial,
      page: () => HomePage(),
    ),
    GetPage(
      name: Routes.NextScreen,
      page: () => NextScreen(),
    ),
  ];
}

3、替换MaterialApp为GetMaterialApp：

void main() {
  runApp(GetMaterialApp(
    debugShowCheckedModeBanner: false,
    initialRoute: '/',
    theme: appThemeData,
    defaultTransition: Transition.fade,
    getPages: AppPages.pages,
    home: HomePage(),
  ));
}

使用

导航到下一个页面：

Get.toNamed(Routes.NextScreen);

导航到下一个页面并删除前一个页面：

Get.offNamed(Routes.NextScreen);

导航到下一个页面并删除以前所有的页面：

Get.offAllNamed(Routes.NextScreen);

发送数据到别名路由：

Get在这里接受任何东西，无论是一个字符串，一个Map，一个List，甚至一个类的实例。

Get.toNamed(Routes.NextScreen, arguments: '新垣结衣');

获取参数：

String name=Get.arguments;

动态网页链接:

像web一样携带参数，适合前端开发的风格。

Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

获取参数：

int id = Get.parameters['id'];
// out: 354
String name=Get.parameters['name'];

还可以这样定义路由别名：

 GetPage(
  name: '/profile/:user',
  page: () => UserProfile(),
),

导航：

Get.toNamed("/profile/13323");

在第二个页面上，通过参数获取数据

print(Get.parameters['user']);
// out: 13323

中间件

在跳转前做些事情，比如判断是否登录，可以使用routingCallback来实现：

GetMaterialApp(
  routingCallback: (routing) {
    if(routing.current == '/second'){
     // 如果登录。。。
    }
  }
)

小部件导航

SnackBars

弹出：

Get.snackbar('Hi', 'i am a modern snackbar');

对应原生写法：

final snackBar = SnackBar(content: Text('Hi!'),action: SnackBarAction(label: 'I am a old and ugly snackbar',onPressed: (){}),
);

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

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

Dialogs

打开一个默认的Dialog：

Get.defaultDialog(
  onConfirm: () => print("Ok"),
  middleText: "Dialog made in 3 lines of code"
);

打开自定义的Dialog：

Get.dialog(YourDialogWidget());

BottomSheets

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

Get.bottomSheet(
  Container(
    child: Wrap(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.music_note),
          title: Text('Music'),
          onTap: () => {}
        ),
        ListTile(
          leading: Icon(Icons.videocam),
          title: Text('Video'),
          onTap: () => {},
        ),
      ],
    ),
  )
);