路由 · PHP/Python/前端/Linux 等等学习笔记

[TOC] > [参考](https://docs.flutter.dev/cookbook/navigation/navigation-basics) ## 路由跳转 code ``` // Within the `FirstRoute` widget onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => const SecondRoute()), ); } ``` 返回 code ``` onPressed: () { Navigator.pop(context); } ``` demo code <details> <summary>main.dart</summary> ``` import 'package:flutter/material.dart'; void main() { runApp(const MaterialApp( title: 'Navigation Basics', home: FirstRoute(), )); } class FirstRoute extends StatelessWidget { const FirstRoute({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('First Route'), ), body: Center( child: ElevatedButton( child: const Text('Open route'), onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => const SecondRoute()), ); }, ), ), ); } } class SecondRoute extends StatelessWidget { const SecondRoute({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Second Route'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.pop(context); }, child: const Text('Go back!'), ), ), ); } } ``` </details> ## 带名称路由 1. 定义路由 ``` MaterialApp( title: 'Named Routes Demo', // Start the app with the "/" named route. In this case, the app starts // on the FirstScreen widget. initialRoute: '/', routes: { // When navigating to the "/" route, build the FirstScreen widget. '/': (context) => const FirstScreen(), // When navigating to the "/second" route, build the SecondScreen widget. '/second': (context) => const SecondScreen(), }, ) ``` 2. 点击跳转 ``` // Within the `FirstScreen` widget onPressed: () { // Navigate to the second screen using a named route. Navigator.pushNamed(context, '/second'); } ``` 3. 点击返回 ``` // Within the SecondScreen widget onPressed: () { // Navigate back to the first screen by popping the current route // off the stack. Navigator.pop(context); } ``` 实例： <details> <summary>main.dart</summary> ``` import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( initialRoute: "/", routes: { "/":(context)=>const App(), "/first": (context) => const FirstRoute(), "/second": (context) => const SecondRoute(), }, title: 'Navigation Basics', )); } class App extends StatelessWidget { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('First Rout111e'), ), body: Center( child: Column( children: [ TextButton( child: const Text('Open 111'), onPressed: () { Navigator.pushNamed(context, "/first"); }, ), TextButton( child: const Text('Open 222'), onPressed: () { Navigator.pushNamed(context, "/second"); }, ), ], ) ), ); } } class One extends StatelessWidget { const One({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('First Route'), ), body: Center( child: TextButton( child: const Text('Open route'), onPressed: () { Navigator.pop(context); }, ), ), ); } } class FirstRoute extends StatelessWidget { const FirstRoute({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('First Rout111e'), ), body: Center( child: TextButton( child: const Text('Open route111'), onPressed: () { Navigator.pushNamed(context, "/second"); }, ), ), ); } } class SecondRoute extends StatelessWidget { const SecondRoute({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Second Route'), ), body: const Center( child: Text('Go back!'), ), ); } } ``` </details> ## 将参数传递给命名路由 > [参考](https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments) 1. 定义参数 ``` class ScreenArguments { final String title; final String message; ScreenArguments(this.title, this.message); } ``` 2. 从context中提取arguments ``` class ExtractArgumentsScreen extends StatelessWidget { const ExtractArgumentsScreen({super.key}); static const routeName = '/extractArguments'; @override Widget build(BuildContext context) { final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments; return Scaffold( appBar: AppBar( title: Text(args.title), ), body: Center( child: Text(args.message), ), ); } } ``` 3. 注册到路由 ``` MaterialApp( routes: { ExtractArgumentsScreen.routeName: (context) => const ExtractArgumentsScreen(), }, ) ``` 4. 传参数并跳转到导航 ``` onPressed: () { // When the user taps the button, // navigate to a named route and // provide the arguments as an optional // parameter. Navigator.pushNamed( context, ExtractArgumentsScreen.routeName, arguments: ScreenArguments( 'Extract Arguments Screen', 'This message is extracted in the build method.', ), ); }, ``` 5. 提取参数到 `onGenerateRoute` ``` MaterialApp( routes: { ExtractArgumentsScreen.routeName: (context) => const ExtractArgumentsScreen(), }, onGenerateRoute: (settings) { if (settings.name == PassArgumentsScreen.routeName) { final args = settings.arguments as ScreenArguments; return MaterialPageRoute( builder: (context) { return PassArgumentsScreen( title: args.title, message: args.message, ); }, ); } assert(false, 'Need to implement ${settings.name}'); return null; }, title: 'Navigation with Arguments', home: const HomeScreen(), ); ``` 实例: <details> <summary>main.dart</summary> ``` import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( routes: { ExtractArgumentsScreen.routeName: (context) => const ExtractArgumentsScreen(), }, onGenerateRoute: (settings) { if (settings.name == PassArgumentsScreen.routeName) { final args = settings.arguments as ScreenArguments; return MaterialPageRoute( builder: (context) { return PassArgumentsScreen( title: args.title, message: args.message1, ); }, ); } assert(false, 'Need to implement ${settings.name}'); return null; }, title: 'Navigation with Arguments', home: const HomeScreen(), ); } } class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Home Screen'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // A button that navigates to a named route. // The named route extracts the arguments // by itself. ElevatedButton( onPressed: () { // When the user taps the button, // navigate to a named route and // provide the arguments as an optional // parameter. Navigator.pushNamed( context, ExtractArgumentsScreen.routeName, arguments: ScreenArguments( 'Extract Arguments Screen', 'This message is extracted in the build method.', "asdasdsad", ), ); }, child: const Text('Navigate to screen that extracts arguments!!!'), ), // A button that navigates to a named route. // For this route, extract the arguments in // the onGenerateRoute function and pass them // to the screen. ElevatedButton( onPressed: () { // When the user taps the button, navigate // to a named route and provide the arguments // as an optional parameter. Navigator.pushNamed( context, PassArgumentsScreen.routeName, arguments: ScreenArguments( 'Accept Arguments Screen', 'This message is extracted in the onGenerateRoute ', 'function.1111', ), ); }, child: const Text('Navigate to a named that accepts arguments'), ), ], ), ), ); } } // A Widget that extracts the necessary arguments from // the ModalRoute. class ExtractArgumentsScreen extends StatelessWidget { const ExtractArgumentsScreen({super.key}); static const routeName = '/extractArguments'; @override Widget build(BuildContext context) { // Extract the arguments from the current ModalRoute // settings and cast them as ScreenArguments. final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments; return Scaffold( appBar: AppBar( title: Text(args.title), ), body: Center( child: Column( children: [ Text(args.message), Text(args.message1), Text(args.message1), ], ), ), ); } } class PassArgumentsScreen extends StatelessWidget { static const routeName = '/passArguments'; final String title; final String message; const PassArgumentsScreen({ super.key, required this.title, required this.message, }); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Text(message), ), ); } } // You can pass any object to the arguments parameter. // In this example, create a class that contains both // a customizable title and message. class ScreenArguments { final String title; final String message; final String message1; ScreenArguments(this.title, this.message,this.message1); ``` </details> ## 从 screen 中返回数据 > [参考](https://docs.flutter.dev/cookbook/navigation/returning-data) ## 发送数据到新的screen > [参考](https://docs.flutter.dev/cookbook/navigation/passing-data)