flutter学习八 路由

Flutter 中返回到上一级页面

Navigator.of(context).pop();

Flutter 中替换路由

Navigator.of(context).pushReplacementNamed('/registerSecond');

Flutter 返回到根路由
Tabs为要返回的根页面

Navigator.of(context).pushAndRemoveUntil( 
new MaterialPageRoute(builder: (context) => new Tabs(index:1)), 
(route) => route == null 
);

Flutter 中的基本路由使用
哪个页面需要加载哪个页面就引入该页面
在HomPage中引入SearchPage.dart

import '../SearchPage.dart';

在HomePage中通过下面方法跳转

RaisedButton(
            child: Text("跳转到搜索页面"),
            onPressed: (){
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context){
                      return SearchPage();
                  }
                )
              );
                
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary
)

Flutter 中的命名路由
在main.dart中引入相关文件
在MaterialApp中配置路由

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/from.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Tabs(),
      routes: {
        '/form':(context)=>FromPage()
      },
    );
  }
}

在页面中点击是跳转路由

  onPressed: (){
    Navigator.pushNamed(context, '/form');
  },

传值onGenerateRoute
1,main.dart

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/from.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  final routes = {
    '/form':(context,{arguments})=>FromPage(arguments:arguments)
  };
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Tabs(),
      onGenerateRoute: (RouteSettings settings) {
          // 统一处理
          final String name = settings.name;
          final Function pageContentBuilder = this.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;
            }
          }
      }
    );
  }
}

2,form.dart

class FromPage extends StatelessWidget{
  final arguments;
  FromPage({this.arguments});
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('search page')
      ),
      body: Text('search content${arguments["ids"]}')
    );
  }
}

3,跳转页面按钮

 onPressed: (){
            Navigator.pushNamed(context, '/form',arguments:{'ids':123});
          },

Router抽离
Routers.dart

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';
import 'pages/from.dart';

final routes = {
    '/:(context,{arguments})=>Tabs(),
    '/form':(context,{arguments})=>FromPage(arguments:arguments)
  };

      onGenerateRoute = (RouteSettings settings) {
          // 统一处理
          final String name = settings.name;
          final Function pageContentBuilder = this.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;
            }
          }
      }

Main.dart

import 'pages/Routers.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      initialRoute:'/',
      onGenerateRoute: onGenerateRoute
    );
  }
}

有状态组件传值

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget{
  Map arguments;
  HomePage({Key key, this.arguments}) : super(key: key);
  _HomePageState createState() => _HomePageState(arguments: this.arguments);
}
class _HomePageState extends State<HomePage>{
  Map arguments;
  _HomePageState({this.arguments});
  @override
  Widget build(BuildContext context){
    return Column(
     ...
    );
  }
}

猜你喜欢

转载自blog.csdn.net/weixin_45561719/article/details/107881420