首页 > 其他分享 >前端学习-flutter学习-005-路由管理

前端学习-flutter学习-005-路由管理

时间：2024-07-09 22:57:57浏览次数：17  
标签：return 005 Text 学习 context Navigator flutter 路由 页面

《Flutter实战·第二版》

简单示例-跳转页面

import 'package:flutter/material.dart';
import 'dart:ui';

// import 'package:flutter/cupertino.dart';
// void main() {
//   runApp(const MyApp());
// }

void main() => runApp(const MyApp());
// void main() => runApp(CupertinoApp(home: CupertinoTestRoute()));

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("路由-计数器例子"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Page1(),
      ),
    );
    // return CounterWidget();
  }
}

class Page1 extends StatefulWidget {
  Page1({Key? key}) : super(key: key);

  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // print("build");
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineLarge,
            ),
            TextButton(
              style: TextButton.styleFrom(
                foregroundColor: Colors.white,        ///   按钮文字颜色
                backgroundColor: Colors.blue,
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) {
                    return NewRoute();
                  }),
                );
              },
              child: Text('跳转到新页面')),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('路由跳转页面'),
      ),
      body: Center(
        child: Text('这是新的页面！'),
      ),
    );
  }
}

MaterialPageRoute

  MaterialPageRoute({
    WidgetBuilder builder, // 构建路由页面的具体内容，返回值是一个widget
    RouteSettings settings, // 路由的配置信息，如路由名称、是否初始路由（首页）
    bool maintainState = true, // 默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为 false
    bool fullscreenDialog = false, // 表示新的路由页面是否是一个全屏的模态对话框，在 iOS 中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）
  })

Navigator是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由

  • 入栈（即打开新的页面）：Future push(BuildContext context, Route route)
  • 出栈：bool pop(BuildContext context, [ result ])，result 为页面关闭时返回给上一个页面的数据。
  • 其他方法：Navigator.replace、Navigator.popUntil

Navigator.push(BuildContext context, Route route)等价于Navigator.of(context).push(Route route)

路由传值

两个传值方式：

  • 页面1（旧页面）跳转到页面2（新页面）时，将数据传递到页面2（新页面），页面2需要定义这个参数、接收参数
  • 页面2（新页面）返回到页面1（旧页面）时，将数据返回页面1（旧页面），主要使用() => Navigator.pop(context, "这个数据是新页面传递给旧页面的")，其中第二个参数，会返回给页面1的result(如下)
var result = await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) {
        return TipRoute(
          // 路由参数
          text: "这个数据是旧页面传递给新页面的",
        );
      },
    ),
  );

import 'package:flutter/material.dart';
import 'dart:ui';

// import 'package:flutter/cupertino.dart';
// void main() {
//   runApp(const MyApp());
// }

void main() => runApp(const MyApp());
// void main() => runApp(CupertinoApp(home: CupertinoTestRoute()));

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: RouterTestRoute(),
    );
  }
}

class TipRoute extends StatelessWidget {
  TipRoute({
    Key? key,
    required this.text,  // 接收一个text参数
  }) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("提示"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text),
              ElevatedButton(
                onPressed: () => Navigator.pop(context, "这个数据是新页面传递给旧页面的"),
                child: Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class RouterTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("初始页面"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 打开`TipRoute`，并等待返回结果
            var result = await Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return TipRoute(
                    // 路由参数
                    text: "这个数据是旧页面传递给新页面的",
                  );
                },
              ),
            );
            //输出`TipRoute`路由返回结果
            print("路由返回值: $result");
          },
          child: Text("打开提示页"),
        ),
      ),
    );


  }
}

命名路由

有几个要点：

  • 注册路由表：要在 MyApp 的 MaterialApp 内，增加如下代码,其中配置/的话（也就是首页页面），需要同时配置initialRoute:"/"
initialRoute:"/", //名为"/"的路由作为应用的home(首页)
routes:{
  "new_page":(context) => TipRoute(text:'这个参数是配置路由传过来的'),
  "/":(context) => RouterTestRoute(), //注册首页路由
},
  • 注册路由表后，需要通过配置的路由名称打开页面：
onPressed: () {
  Navigator.pushNamed(context, "new_page");
  //Navigator.push(context,
  //  MaterialPageRoute(builder: (context) {
  //  return NewRoute();
  //}));  
}
  • 可以使用pushNamed传递参数 var result = await Navigator.pushNamed(context, "new_page", arguments: "hi");,接收参数则是：var args=ModalRoute.of(context)?.settings.arguments;

所有代码

import 'package:flutter/material.dart';
import 'dart:ui';

void main() => runApp(const MyApp());
// void main() => runApp(CupertinoApp(home: CupertinoTestRoute()));

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute:"/", //名为"/"的路由作为应用的home(首页)
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      routes:{
        "new_page":(context) => TipRoute(text:'这个参数是配置路由传过来的'),
        "/":(context) => RouterTestRoute(), //注册首页路由
      },
    );
  }
}

class TipRoute extends StatelessWidget {
  TipRoute({
    Key? key,
    required this.text,  // 接收一个text参数
  }) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    //获取路由参数
    var args=ModalRoute.of(context)?.settings.arguments;
    print('旧页面传递参数的方法2：arguments：$args');
    return Scaffold(
      appBar: AppBar(
        title: Text("提示"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text),
              ElevatedButton(
                onPressed: () => Navigator.pop(context, "这个数据是新页面传递给旧页面的"),
                child: Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class RouterTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("初始页面"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 打开`TipRoute`，并等待返回结果
            // var result = await Navigator.push(
            //   context,
            //   MaterialPageRoute(
            //     builder: (context) {
            //       return TipRoute(
            //         // 路由参数
            //         text: "这个数据是旧页面传递给新页面的",
            //       );
            //     },
            //   ),
            // );
            var result = await Navigator.pushNamed(context, "new_page",  arguments: "hi");
            //输出`TipRoute`路由返回结果
            print("路由返回值: $result");
          },
          child: Text("打开提示页"),
        ),
      ),
    );


  }
}

路由生成钩子

MaterialApp有一个onGenerateRoute属性，当调用Navigator.pushNamed(...)打开命名路由时，如果指定的路由名在路由表中已注册，则会调用路由表中的builder函数来生成路由组件；如果路由表中没有注册，才会调用onGenerateRoute来生成路由。有了onGenerateRoute回调，要实现上面控制页面权限的功能就非常容易：我们放弃使用路由表，取而代之的是提供一个onGenerateRoute回调，然后在该回调中进行统一的权限控制，如：

MaterialApp(
  ... //省略无关代码
  onGenerateRoute:(RouteSettings settings){
	  return MaterialPageRoute(builder: (context){
		   String routeName = settings.name;
       // 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由，
       // 引导用户登录；其他情况则正常打开路由。
     }
   );
  }
);

标签：return,005,Text,学习,context,Navigator,flutter,路由,页面
From： https://www.cnblogs.com/ayubene/p/18289088

相关文章

  • Django学习第六天
     启动项目命令pythonmanage.pyrunserver取消模态框功能js实现列表数据删除第二种实现思路使用jquery修改模态框标题编辑页面拿到数据库数据显示默认数据功能实现想要去数据库中获取数据时：对象/字典三种不同的数据类型使用Ajax传入数据实现表单编辑，删除，修改......
  • 数据结构——并查集 学习笔记
    数据结构——并查集学习笔记并查集是一种用于管理元素所属集合的数据结构，实现为一个森林。并查集中，每棵树表示一个集合，树中的节点表示对应集合中的元素。其思想是，把集合属性绑定到根节点上，避免多余的处理，因此一般难以分离。普通并查集并查集支持两种操作：合并（Union）：合并两个元素......
  • 「学习笔记」数位DP
    虽然叫DP，但是基本所有数位DP题我们都可以用好打好想好理解的记忆化搜索来做。记搜模板有一个大致的记忆化搜索模板，AKALL数位DPintdfs(intlen,boollead,boollimit,...){ if(!len)return1;//len=0,即所有位都搜完 if(~f[len][lead][limit]...)returnf[l......
  • 下降幂学习笔记
    下降幂学习笔记还原精灵还我笔记——来自打完笔记但关电脑前没有保存的某人的呐喊。定义下降幂就是形如\(n^{\underline{m}}\)的式子，表示\[n^{\underline{m}}=\prod_{i=n-m+1}^{n}=\frac{n!}{(n-m)!}\]同理声明一个上升幂\(n^{\overline{m}}\)，表示\[n^{\overline{m}}=\pr......
  • 比赛获奖的武林秘籍：05 电子计算机类比赛国奖队伍技术如何分工和学习内容
    比赛获奖的武林秘籍：05电子计算机类比赛国奖队伍技术如何分工和学习内容摘要本文主要介绍了在电子计算机类比赛中技术层面上的团队分工和需要学习的内容，分为了嵌入式硬件、嵌入式软件、视觉图像处理、机械、上位机软件开发和数据分析等六个方向，并结合自身经历给出相关建议。正......
  • 学习老算法，争做老东西
    目录DancingLinksDancingLinks考虑这样一个问题：给定一个\(N\)行\(M\)列的矩阵，矩阵中每个元素要么是\(1\)，要么是\(0\)。你需要在矩阵中挑选出若干行，使得对于矩阵的每一列\(j\)，在你挑选的这些行中，有且仅有一行的第\(j\)个元素为\(1\)。这类问题统称为精确覆盖问......
  • 设计模式学习（二）工厂模式——抽象工厂模式+注册表
    目录前言使用简单工厂改进使用注册表改进参考文章前言在上一篇文章中我们提到了抽象工厂模式初版代码的一些缺点：①客户端违反开闭原则②提供方违反开闭原则。本文将针对这两点进行讨论使用简单工厂改进对于缺点①，我们可以使用简单工厂的思路来改进抽象工厂的初版代码。对于上......
  • 信创学习笔记(二),信创之CPU芯片架构思维导图
    创作不易只因热爱!!热衷分享，一起成长!“你的鼓励就是我努力付出的动力”各架构,操作系统,指令,代表生产商,服务器使用产品主要供应商......
  • 信创学习笔记(一),信创内容思维导图
    创作不易只因热爱!!热衷分享，一起成长!“你的鼓励就是我努力付出的动力”用一张图归纳学习信创内容信创内容思维导图......
  • 昇思25天学习打卡营第11天|基于MindSpore的GPT2文本摘要
    数据集准备nlpcc2017摘要数据，内容为新闻正文及其摘要，总计50000个样本。数据需要预处理，如下原始数据格式：article:[CLS]article_context[SEP]summary:[CLS]summary_context[SEP]预处理后的数据格式：[CLS]article_context[SEP]summary_context[SEP]代码示......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99