Flutter中GetX的用法(路由管理)

2024-03-17 05:28
文章标签 路由 管理 用法 flutter getx

本文主要是介绍Flutter中GetX的用法(路由管理)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

前言

一.安装

二.从一个计时器开始

三.Getx路由管理

1.普通路由导航

1.导航到新的页面

2.关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西

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

4.进入下一个界面并取消之前的所有路由

5.要导航到下一条路由，并在返回后立即接收或更新数据

2.别名路由导航

1.导航到下一个页面

2.浏览并删除前一个页面

3.浏览并删除所有以前的页面

4.别名路由传值

5.动态网页链接

3.中间件

4.免context导航

1.SnackBars

2.Dialogs

3.BottomSheets

四.文章中的完整demo

前言

        正如Get官方介绍，GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。GetX 有3个基本原则：

        性能： GetX 专注于性能和最小资源消耗。

        效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。

        结构： GetX 可以将界面、逻辑、依赖和路由之间低耦合,逻辑更清晰，代码更容易维护。

        这篇文章主要是介绍下GetX的用法。

一.安装

        目前get最新的版本是4.6.6。安装方式如下：

dependencies:
  get: ^4.6.6

二.从一个计时器开始

        但我们创建一个flutter工程的时候，系统会生成一个计时器的示例代码，代码大致如下(我删除了部分注释代码)：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        主要功能是点击+按钮，每次计时器的个数+1.点击按钮之后，调用setState方法刷新_counter变量。

        下面我们看一下如何使用getx来实现上述的功能：

        第一步：把系统的MaterialApp改成GetMaterialApp:

void main() => runApp(GetMaterialApp(home: Home()));

        第二步：创建业务类，我们把_counter变量放在Controller类中：

class Controller extends GetxController{
  var counter = 0.obs;
  increment() => counter++;
}

        第三步：使用StatelessWidget代替StatefulWidget，节省下内存。修改之后的完整代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return GetMaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}
class Controller extends GetxController{var counter = 0.obs;incrementCounter()=>counter++;
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key, required this.title});final String title;@overrideWidget build(BuildContext context) {final Controller controller = Get.put(Controller());return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Obx(() => Text('${controller.counter}',style: Theme.of(context).textTheme.headlineMedium,)),],),),floatingActionButton: FloatingActionButton(onPressed: (){controller.incrementCounter();},tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

三.Getx路由管理

1.普通路由导航

1.导航到新的页面

        假如我们有一个新页面NextScreenPage,代码如下：

import 'package:flutter/material.dart';class NextScreenPage extends StatelessWidget {const NextScreenPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("新页面"),),body: Container(), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        从当前页面跳转到NextScreenPage页面，代码如下：

Get.to(()=>NextScreen());

2.关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西

        还是以上面的代码为例，我们添加一个返回按钮，点击返回按钮的时候，回到当前页面。主需要在按钮的点击事件中添加如下代码即可：

Get.back();

        NextScreenPage页面完整代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';class NextScreenPage extends StatelessWidget {const NextScreenPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("新页面"),),body: Center(child: ElevatedButton(onPressed: (){Get.back();}, child: const Text("返回上一个页面")),), // This trailing comma makes auto-formatting nicer for build methods.);}
}
3.进入下一个页面，但没有返回上一个页面的选项（用于SplashScreens，登录页面等）

        主要的代码如下：

Get.off(()=>const NormalRoutePage(title: "主页面"));

        这里我们模拟一个登陆页面的场景，假设当前页面(NormalRoutePage)有一个按钮，点击按钮之后，我们跳转到登陆页面(LoginPage)，登陆成功之后，进入个人中心页面(ProfilePage)，这个时候，个人中心页面有个返回按钮，我们点击返回按钮的时候回到主页面，主要的代码如下：

        登陆页面代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demos/route_manager/login/profile_page.dart';class LoginPage extends StatelessWidget {const LoginPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("登陆页面"),),body: Center(child: ElevatedButton(onPressed: (){Get.to(()=>const ProfilePage());}, child: const Text("点击进入个人中心页面")),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        个人中心页面代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demos/route_manager/normal_route_page.dart';class ProfilePage extends StatelessWidget {const ProfilePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("个人中心页面"),),body: Center(child: ElevatedButton(onPressed: (){Get.off(const NormalRoutePage(title: "主页面"));}, child: const Text("返回主页面")),), // This trailing comma makes auto-formatting nicer for build methods.);}
}
4.进入下一个界面并取消之前的所有路由

Get.offAll(NextScreen());

5.要导航到下一条路由，并在返回后立即接收或更新数据

        假设当前页面是SecondPage,当我们跳转按钮之后跳转到ThirdPage,按钮的点击事件中我们使用下面的代码获取ThirdPage回传的值:

var data = await Get.to(const ThirdPage());        

        SecondPage页面代码如下：

import 'package:getx_demos/route_manager/login/third_page.dart';class SecondPage extends StatelessWidget {const SecondPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("回调传值"),),body: Column(children: [Center(child: ElevatedButton(onPressed: () async {var data = await Get.to(const ThirdPage());debugPrint("下个页面回调值:$data");Get.to(()=>const ThirdPage());}, child: const Text("跳转Third页面")),),],), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        ThirdPage页面代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';class ThirdPage extends StatelessWidget {const ThirdPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("Third"),),body: Column(children: [const Text("第二个页面传过来的值:"),Center(child: ElevatedButton(onPressed: (){Get.back(result: "555555");}, child: const Text("返回主页面")),),],), // This trailing comma makes auto-formatting nicer for build methods.);}
}

2.别名路由导航

        Get支持别名路由，使用别名路由的时候，我们需要在GetMaterialApp定义一下，假如我们有一个NextScreenPage页面，使用别名路由的时候，代码定义如下：

class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return GetMaterialApp(title: 'Flutter Demo',initialRoute: "/",getPages: [GetPage(name: "/next_screen", page: ()=>const NextScreenPage()),],theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}
1.导航到下一个页面

Get.toNamed("/next_screen");

2.浏览并删除前一个页面

Get.offNamed("/next_screen");

3.浏览并删除所有以前的页面

Get.offAllNamed("/next_screen");

4.别名路由传值

Get.toNamed("/rename_main",arguments: "Getx route manager");

5.动态网页链接

        Get提供高级动态URL，就像在Web上一样。

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

        第二个页面获取数据：

debugPrint("id = ${Get.parameters['id']} ");
debugPrint("device = ${Get.parameters['device']} ");
debugPrint("name = ${Get.parameters['name']} ");

3.中间件

        如果你想通过监听Get事件来触发动作，你可以使用routingCallback来实现。

GetMaterialApp( routingCallback: (routing) { if(routing.current == '/second'){ openAds(); } } )

4.免context导航

        如果你想通过监听Get事件来触发动作，你可以使用routingCallback来实现。

1.SnackBars

        GetX创建一个SnackBars代码如下：

Get.snackbar('SnackBar', '我是SnackBar');

2.Dialogs

        打开默认Dialogs：

Get.defaultDialog(
onConfirm: () => debugPrint("Ok"),
middleText: "我是Dialog"
);

3.BottomSheets

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

Get.bottomSheet(
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: () {},
),
],
)
);

5.嵌套导航

        Get让Flutter的嵌套导航更加简单。 你不需要context，而是通过Id找到你的导航栈。

Navigator(
  key: Get.nestedKey(1), // create a key by index
  initialRoute: '/',
  onGenerateRoute: (settings) {
    if (settings.name == '/') {
      return GetPageRoute(
        page: () => Scaffold(
          appBar: AppBar(
            title: Text("Main"),
          ),
          body: Center(
            child: TextButton(
              color: Colors.blue,
              onPressed: () {
                Get.toNamed('/second', id:1); // navigate by your nested route by index
              },
              child: Text("Go to second"),
            ),
          ),
        ),
      );
    } else if (settings.name == '/second') {
      return GetPageRoute(
        page: () => Center(
          child: Scaffold(
            appBar: AppBar(
              title: Text("Main"),
            ),
            body: Center(
              child:  Text("second")
            ),
          ),
        ),
      );
    }
  }
),

四.文章中的完整demo

        本文实例中的demo地址。

这篇关于Flutter中GetX的用法(路由管理)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/817948。

相关文章

MySQL数据库中ENUM的用法是什么详解

MySQL数据库中ENUM的用法是什么详解

《MySQL数据库中ENUM的用法是什么详解》ENUM是一个字符串对象,用于指定一组预定义的值,并可在创建表时使用,下面：本文主要介绍MySQL数据库中ENUM的用法是什么的相关资料,文中通过代码... 目录mysql 中 ENUM 的用法一、ENUM 的定义与语法二、ENUM 的特点三、ENUM 的用法1
阅读更多...
JavaSE正则表达式用法总结大全

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,：本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta
阅读更多...
MySQL之InnoDB存储引擎中的索引用法及说明

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》：本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二
阅读更多...
mysql中的数据目录用法及说明

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》：本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后，在安装目录下会有一个data目录，我们创建的数据库、创建的表、插入的
阅读更多...
深度解析Python装饰器常见用法与进阶技巧

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器（Decorator）是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧
阅读更多...
Mysql中isnull,ifnull,nullif的用法及语义详解

Mysql中isnull,ifnull,nullif的用法及语义详解

《Mysql中isnull,ifnull,nullif的用法及语义详解》MySQL中ISNULL判断表达式是否为NULL,IFNULL替换NULL值为指定值,NULLIF在表达式相等时返回NULL,用... 目录mysql中isnull,ifnull,nullif的用法1. ISNULL(expr) → 判
阅读更多...
Java中的for循环高级用法

Java中的for循环高级用法

《Java中的for循环高级用法》本文系统解析Java中传统、增强型for循环、StreamAPI及并行流的实现原理与性能差异,并通过大量代码示例展示实际开发中的最佳实践,感兴趣的朋友一起看看吧... 目录前言一、基础篇：传统for循环1.1 标准语法结构1.2 典型应用场景二、进阶篇：增强型for循环2.
阅读更多...
Python get()函数用法案例详解

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典（dict）类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例：安全访问未知键三、案例：配置参数默认值简介python是一种高级编
阅读更多...
MySQL主从复制与读写分离的用法解读

MySQL主从复制与读写分离的用法解读

《MySQL主从复制与读写分离的用法解读》：本文主要介绍MySQL主从复制与读写分离的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、主从复制mysql主从复制原理实验案例二、读写分离实验案例安装并配置mycat 软件设置mycat读写分离验证mycat读
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2