Flutter(Widget)-路由(普通路由,命名路由)

截屏2022-06-30 23.15.05.png

一,普通路由

Navigator.pop(context);
Navigator.of(context).pop();

Navigator.push(context, MaterialPageRoute(builder: (context){
   return RoutePage2();
}));

Navigator.push(context,MaterialPageRoute(builder: (context) => RoutePage2()));

import 'package:flutter/material.dart';
import 'package:flutter_app/route_page2.dart';

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("navigator")),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text("跳转到表单页面"),
              onPressed: () {
//              Navigator.push(context, MaterialPageRoute(builder: (context){
//                return RoutePage2();
//              }));
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => RoutePage2()));
              },
            )
          ],
      ),
      )
    );
  }
}

import 'package:flutter/material.dart';
class RoutePage2 extends StatefulWidget {
  @override
  _RoutePage2State createState() => _RoutePage2State();
}

class _RoutePage2State extends State<RoutePage2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton:FloatingActionButton(
        child: Text("返回"),
        onPressed: (){
          Navigator.pop(context);
        },
      ) ,
      appBar: AppBar(
        title: Text("navigator2"),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('我是表单页面'),
          ),
          ListTile(
            title: Text('我是表单页面'),
          ),
          ListTile(
            title: Text('我是表单页面'),
          ),
        ],
      ),
    );
  }
}

图像.gif

二,命名路由 根组件里面定义。

 MaterialApp(
   routes: {
      '/form':(context) => FormPage(),
      '/search':(context) => SearchPage()
  })
Navigator.pushNamed(context, '/search');

三,路由的替换和返回到根路由

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第一步-输入手机号")
      ),
      body:Column(
        children: <Widget>[
          SizedBox(height: 40),
          Text("这是注册的第一步,请输入您的手机号 然后点击下一步"),
          SizedBox(height: 40),
          RaisedButton(
            child: Text('下一步'),
            onPressed: (){
                Navigator.pushNamed(context, '/registerSecond');

                //替换路由
                // Navigator.of(context).pushReplacementNamed('/registerSecond');
            },
          )
        ],
      )
    );
  }
}

import 'package:flutter/material.dart';
class RegisterSecondPage extends StatelessWidget {
  const RegisterSecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第二步-验证码")
      ),body:Column(
        children: <Widget>[
          SizedBox(height: 40),
          Text("输入验证码完成注册"),
          SizedBox(height: 40),
          RaisedButton(
            child: Text('下一步'),
            onPressed: (){
                Navigator.pushNamed(context, '/registerThird');

                //替换路由
                // Navigator.of(context).pushReplacementNamed('/registerThird');
            },
          )
        ],
      )
    );
  }
}

import 'package:flutter/material.dart';

//引入tabs

import '../Tabs.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第三步-完成注册")
      ),body:Column(
        children: <Widget>[
          SizedBox(height: 40),
          Text("输入密码完成注册"),
          SizedBox(height: 40),
          RaisedButton(
            child: Text('确定'),
            onPressed: (){
                //返回根
                Navigator.of(context).pushAndRemoveUntil(
                  new MaterialPageRoute(builder: (context) => new Tabs()),                  
                   (route) => route == null
                );
            },
          )
        ],
      )
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
            
      appBar: AppBar(
        title: Text("登录")
      ),
      body: Center(
        
        child: Column(
         children: <Widget>[
            SizedBox(height: 40),
            Text('这是一个登录页面,点击登录会执行登录操作'),
            RaisedButton(
              child: Text("立即登录"),
              onPressed: (){

                  Navigator.of(context).pop();
              },
            )
          ],
        ),
      ),
    );
  }
}

图像 2.gif