随笔 - 210  文章 - 0 评论 - 0 阅读 - 61532
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

Flutter 中的命名路由

main.dart中配置路由

复制代码
void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      appBarTheme: const AppBarTheme(
        color: Colors.blue, // 设置导航栏颜色 (新版本的设置方法)
      ),
    ),
    // home: Scaffold(body: MyFlutter1())
    initialRoute: "/", //初始化路由
    routes: {
      "/": (contxt) => const MyFlutter1(),
      "/form": (contxt) => const FormPage(),
      // "/news": (contxt)=>const SearchMyApp(),
      "/news": (contxt) {
        return const SearchMyApp();
      }, //类似
    },
  ));
}
复制代码

跳转路由

复制代码
class TimePag extends StatefulWidget {
  const TimePag({super.key});

  @override
  State<TimePag> createState() => _TimePagState();
}
class _TimePagState extends State<TimePag> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/news"); //命名路由跳转
            },
            child: const Text("命名路由跳转"))
      ],
    );
  }
}
复制代码

Flutter 中的命名路由传值

配置onGenerateRoute

复制代码
class MyApp1 extends StatelessWidget {
  //1.配置路由
  Map routes = {
    "/": (contxt) => const MyFlutter1(),
    "/form": (contxt) => const FormPage(),
    // "/news": (contxt)=>const SearchMyApp(),
    "/news": (contxt, {arguments}) {
      return SearchMyApp(arguments: arguments); //命名路由传参
    }, //类似
  };
  MyApp1({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          color: Colors.blue, // 设置导航栏颜色 (新版本的设置方法)
        ),
      ),
      // home: Scaffold(body: MyFlutter1())
      initialRoute: "/", //初始化路由
      //2、调用onGenerateRoute处理(固定写法)
      onGenerateRoute: (RouteSettings settings) {
        // 统一处理
        final String? name = settings.name; //获取命名路由的名称
        final Function? pageContentBuilder = routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
                builder: (context) =>
                    pageContentBuilder(context, arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context));
            return route;
          }
        }
        return null;
      },
    );
  }
}
复制代码

定义页面接收arguments传参

复制代码
//其他页面跳转到本页面进行传参
class SearchMyApp extends StatefulWidget {

  final Map arguments;

 const  SearchMyApp({super.key,required this.arguments});  //必须传入

  @override
  State<SearchMyApp> createState() => _SearchMyAppState();
}

class _SearchMyAppState extends State<SearchMyApp> {

  @override
  void initState() {
    super.initState();
    print(widget.arguments);  //参数
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新闻页面"),
      ),
      body: Center(child: Text("内容")),
    );
  }
}
复制代码

跳转页面实现传参

复制代码
class TimePag extends StatefulWidget {
  const TimePag({super.key});

  @override
  State<TimePag> createState() => _TimePagState();
}

class _TimePagState extends State<TimePag> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/news",
                  arguments: {"title": "我是命名路由传的值", "id": 5}); //命名路由跳转
            },
            child: const Text("命名路由跳转传值"))
      ],
    );
  }
}
复制代码

Flutter 中的命名路由单独抽离到一个文件

新建routers/routers.dart 配置路由

复制代码
import 'package:app_flutter01/pages/form.dart';
import 'package:app_flutter01/pages/news.dart';
import 'package:app_flutter01/pages/tabs.dart';
import 'package:flutter/material.dart';


  //1.配置路由
  Map routes = {
    "/": (contxt) => const MyFlutter1(),
    "/form": (contxt) => const FormPage(),
    // "/news": (contxt)=>const SearchMyApp(),
    "/news": (contxt, {arguments}) {
      return SearchMyApp(arguments: arguments); //命名路由传参
    }, //类似
  };

// onGenerateRoute处理(固定写法)  这个方法也相当于一个中间件,这里可以做权限判断
  var onGenerateRoute = (RouteSettings settings) {
        // 统一处理
        final String? name = settings.name; //获取命名路由的名称
        final Function? pageContentBuilder = routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
                builder: (context) =>
                    pageContentBuilder(context, arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context));
            return route;
          }
        }
        return null;
      };
复制代码

修改main.dart

复制代码
class MyApp1 extends StatelessWidget {
  MyApp1({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          color: Colors.blue, // 设置导航栏颜色 (新版本的设置方法)
        ),
      ),
      // home: Scaffold(body: MyFlutter1())
      initialRoute: "/", //初始化路由
      //2、调用onGenerateRoute处理(固定写法)
      onGenerateRoute: onGenerateRoute,
    );
  }
}
复制代码

实现页面跳转传值

复制代码
class TimePag extends StatefulWidget {
  const TimePag({super.key});

  @override
  State<TimePag> createState() => _TimePagState();
}

class _TimePagState extends State<TimePag> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/news",
                  arguments: {"title": "我是命名路由传的值", "id": 5}); //命名路由跳转
            },
            child: const Text("命名路由跳转传值"))
      ],
    );
  }
}
复制代码
Flutter 返回上一级路由
Navigator.of(context).pop();

Flutter 中替换路由

比如我们从用户中心页面跳转到了registerFirst页面,然后从registerFirst页面通过
pushReplacementNamed跳转到了registerSecond页面。这个时候当我们点击registerSecond的返回
按钮的时候它会直接返回到用户中心。
Navigator.of(context).pushReplacementNamed('/registerSecond');

Flutter 返回到根路由

比如我们从用户中心跳转到registerFirst页面,然后从registerFirst页面跳转到registerSecond页面,然
后从registerSecond跳转到了registerThird页面。这个时候我们想的是registerThird注册成功后返回到
用户中心。 这个时候就用到了返回到根路由的方法。
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (BuildContext context) {
return const Tabs();
}), (route) => false);

Flutter Android 和Ios使用同样风格的路由跳转

Material组件库中提供了一个MaterialPageRoute组件,它可以使用和平台风格一致的路由切换动画,
如在iOS上会左右滑动切换,而在Android上会上下滑动切换 , CupertinoPageRoute是Cupertino组件
库提供的iOS风格的路由切换组件如果在Android上也想使用左右切换风格,可以使用
CupertinoPageRoute。
复制代码
import 'package:app_flutter01/pages/form.dart';
import 'package:app_flutter01/pages/news.dart';
import 'package:app_flutter01/pages/tabs.dart';
import 'package:flutter/material.dart';

//配置ios fen
import 'package:flutter/cupertino.dart';

/**
 配置ios风格的路由
1、删掉material.dart引入
cupertino.dartimport 'package:flutter/cupertino.dart';
2、把MaterialPageRoute替换成CupertinoPageRoute
 */

//1.配置路由
Map routes = {
  "/": (contxt) => const MyFlutter1(),
  "/form": (contxt) => const FormPage(),
  "/time": (contxt) => const MyFlutter1(),

  // "/news": (contxt)=>const SearchMyApp(),
  "/news": (contxt, {arguments}) {
    return SearchMyApp(arguments: arguments); //命名路由传参
  }, //类似
};

// onGenerateRoute处理(固定写法)  这个方法也相当于一个中间件,这里可以做权限判断
var onGenerateRoute = (RouteSettings settings) {
  // 统一处理
  final String? name = settings.name; //获取命名路由的名称
  final Function? pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      // final Route route = MaterialPageRoute(  //路由效果
      final Route route = CupertinoPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
  return null;
};
复制代码

全局配置主题

复制代码
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
appBarTheme: const AppBarTheme(
centerTitle: true,  //标题居中
)
),
initialRoute: "/",
onGenerateRoute: onGenerateRoute,
);
复制代码

命名路由跳转设置过度动画

复制代码
//routers.dart 文件里直接加
class BackgroundPageRoute extends PageRouteBuilder {
  final WidgetBuilder builder;

  BackgroundPageRoute({required this.builder})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => builder(context),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return Stack(
              children: [
                Positioned.fill(
                  child: Image.network(
                    'url',
                    fit: BoxFit.cover,
                  ),
                ),
                FadeTransition(
                  opacity: animation,
                  child: child,
                ),
              ],
            );
          },
        );
}

//单个使用(需要跳转的页面里)

Navigator.push(
  context,
  BackgroundPageRoute(
    builder: (context) => FormPage(),
  ),
);

//全局使用(在routers.dart 里)
将final Route route = MaterialPageRoute( ....
换成  final Route route = BackgroundPageRoute( //使用BackgroundPageRoute ....
复制代码

 

 

 

posted on   鲤斌  阅读(103)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示