Flutter学习-GetX-02 导航操作

本文主要介绍使用Getx的导航操作以及传值

1.跳转

在原生中我们通常使用的是push进行跳转的，这里是没有定义路径直接通过上下文进行跳转

Navigator.of(context).push(MaterialPageRoute(
    builder: (BuildContext context) => DiscoverChildPage(
          title: widget.title,
        )));

我们使用Get.to进行跳转

 Get.to( DiscoverChildPage(
          title: widget.title,
        )),

当我们定义路径则直接通过Get.toNamed

Get.toNamed("/discover/child");

或者我们之前定义的AppRoutes并使用GetX 定义了路由则直接

Get.toNamed(AppRoutes.discoverDetail);

2. 返回

在原生中我们通常使用的是pop进行返回的

Navigator.pop(context)

使用Getx的话

Get.back()

3. 清除

我们有些时候会用到一些清除的效果，比如说我们首次注册的时候，流程完成后就应该清除该页面

• 清除上一个页面

class ChartChildPage extends StatelessWidget {
  const ChartChildPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('子页面'),),
      body: IconButton(
        icon:const Icon(Icons.close),
        onPressed: ()=> Get.offNamed(AppRoutes.network)
      ),
    );
  }
}

或者直接通过页面

Get.off(const ChatListPage())

• 清除所有路径

onPressed: ()=> Get.offAll(const ScaffoldPage())

也可通过路径

onPressed: ()=> Get.offAllNamed(AppRoutes.network)

Get.offAll这里会清除之前的路径并返回我们括号中的页面并进行初始化，而Get.off则只是相当于返回我们想要的页面,其中的页面就是相当于我们想要的路径，这样我们就可以返回指定页面了，比如可返还当前页面的上上个页面

4. 传值

在页面之间传值与返回值的接收都是开发中必要的功能，相比属性传值，通过Getx传值更加方便。

• 传值 我们在页面跳转的的时候添加

Future<T?>? toNamed<T>(
  String page, {
  dynamic arguments,
  int? id,
  bool preventDuplicates = true,
  Map<String, String>? parameters,
})

我们通常定义的是arguments，因为是dynamic因此可以动态的定义类型

Get.toNamed(AppRoutes.webview,arguments: '我是一个标题');

而parameters则通常是一个 Map<String, String>类型

Get.toNamed(AppRoutes.loadImage,arguments: items[index],parameters: {'title':'跳转网页','desc': "跳转网页",},

• 取值 这里我们arguments传的是什么就是取的是什么

String? title = Get.arguments['title'];

获取parameters

final parameters = Get.parameters;
String? title1 = parameters['title'];

5. 返回值

通常我们可以在Get.back添加result

void back<T>({
  T? result,
  bool closeOverlays = false,
  bool canPop = true,
  int? id,
})

这里我们result为我们回传的参赛，closeOverlays则是否关闭当前的弹出框

Get.back(result: {'result':'success'});

• 接受

var data = await Get.to(const ChartChildPage());
print(data);

打印结果

flutter: {result: success}

6. 拼接参数

我们有的时候会路径拼接或者使用url拼接参数

static void goWeb(String url, String title) {
  Get.toNamed(
      "/web?url=${Uri.encodeComponent(url)}&title=${Uri.encodeComponent(title)}");
}

这样我们通过参数传递进入web页

XRouter.goWeb(url, title);

在WebViewPage获取

String? url = Get.parameters['url'];
String? title = Get.parameters['title'];

7.小结

可以发现通过Getx进行页面的跳转以及返回，或者指定相应页面返回都是比较方便的，同时传参也是多种形式，返回的时候也可以携带参数以及状态从而处理我们页面，刷新状态等。