Flutter 学习 ：Flutter中的普通路由、路由传值

一.复习上一节

BottomNavigationBar 写法

class MyContent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyContentWidget();
  }
}

class MyContentWidget extends State<MyContent> {
  int currentIndex = 0;
  List _listPage = [];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(title: ),
      body: _listPage[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [BottomNavigationBarItem()],
      ),
    ));
  }
}

二.Flutter中的路由

• Flutter中的路由通俗的讲是页面跳转，在Flutter中通过Navigator组件管理路由导航，并提供管理堆栈，如 Navigator.push 和Navigator.pop

• Flutter 中给我们提供了两种配置路由跳转的方式1.基本路由 2.命名路由

三.Flutter中的基本路由的使用

• 比如我们现在想从MyPage1组件跳转到 SearchPage组件
  1、需要在MyPage1中引入SearchPage.dart
  2、在HomePage中通过navigator.of(context).push()跳转

• 主页面

class MyButtonWidget extends State<MyPage1> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        alignment: Alignment.center,
        child: RaisedButton(
          child: Text("进入搜索页面"),
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => SearchPage1()));
          },
        ));
  }
}

• 搜索页面

import 'package:flutter/material.dart';

class SearchPage1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SearchPage1Widget();
  }
}

class SearchPage1Widget extends State<SearchPage1> {
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("搜索页面")),
            body: Container(
                alignment: Alignment.center,
                child: Text("搜索页面")
            )));
  }

• 效果图

  
  基本路由跳转.gif

• 注意

1、所有的页面都是组件所以SearchPage 也是一个组件
2、因为跳转后的页面不依附于主页面，所以需要设置样式MaterialApp
3、因为build后面就一行代码可以用=>
4、builder: (context) => SearchPage1()) 不要带";"因为它是一个参数

三.Flutter中的基本路由传值

基本路由传值和组件传值一样

• 主页面

Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => SearchPage1(searchContent: "搜索汽车")))

• 搜索页面

import 'package:flutter/material.dart';

class SearchPage1 extends StatefulWidget {
  String searchContent;
  
  SearchPage1({this.searchContent = "搜索内容"});

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SearchPage1Widget(this.searchContent);
  }
}

class SearchPage1Widget extends State<SearchPage1> {

  String searchContent;
  
  SearchPage1Widget(this.searchContent);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
            floatingActionButton: FloatingActionButton(
                child: Text("返回"),
                onPressed: () {
                  Navigator.of(context).pop();
                }),
            appBar: AppBar(title: Text("搜索页面")),
            body: Container(
                alignment: Alignment.center, child: Text(searchContent))));
  }
}

• 注意：

1、有状态组件传值需要一层一层传入到State类中。
2、 Navigator.of(context).pop() 返回上一级页面。
3、 FloatingActionButton 组件 是 Scaffold 组件下floatingActionButton参数类型 。
4、 FloatingActionButton 组件为悬浮与底部按钮 。

• 效果图

  
  传参.gif

四.总结

• 1、基本组件跳转
  Navigator.of(context).push(MaterialPageRoute( builder: (context) =>组件()));
• 2、基本组件传参
  Navigator.of(context).push(MaterialPageRoute( builder: (context) =>组件(参数)));
• 3、返回上一页面
  Navigator.of(context).pop();
• 4、悬浮组件
  Scaffold(floatingActionButton: FloatingActionButton());