Flutter普通路由的相关应用

揭秘上期的问题啦：
链接: link.
要想实现底部有多个导航，我们可以加一个属性，
type: BottomNavigationBarType.fixed
把这句代码写在底部导航组件里面。然后就可以放多个导航图标了。
如果不加这个属性的话，当底部的导航图标多了以后就会挤掉之前的，大家可以去试一下~

现在开始新的内容：
首先，路由是啥？通俗点说，就是页面跳转。

切换页面，在flutter里面就是切换组件。

今天我们了解一下，路由的两种配置方式中的一种，普通路由和路由传值
实用场景：小型项目

（一）效果图及页面说明
点击分类里面的表单按钮，就会跳转到表单页面，
点击底部的浮动按钮，可以返回到上一级页面

另外说一下，返回的箭头是自动生成的。不用自己去做。

（二）实现要点
Navigator.of(context).push() 跳转
Navigator.of(context).push() 返回
底部的浮动按钮是 floatingActionButton
在这里插入图片描述

在这里插入图片描述

（三）代码实现
在这里插入图片描述
按照这个目录结构，创建表单文件

具体的代码实现如下：
main.dart

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Tabs());
  }
}

category.dart

import 'package:flutter/material.dart';
import '../Form.dart';//参照自己的路径写
class Categorypage extends StatefulWidget {
  @override
  _CategorypageState createState() => _CategorypageState();
}

class _CategorypageState extends State<Categorypage>{
  @override
  Widget build(BuildContext context) {
   return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("跳转到表单页面并传值"),
            onPressed: () {//监听事件
              //页面跳转即路由跳转
               Navigator.of(context).push(
                 MaterialPageRoute(
                   builder: (context)=>Formpage(title: "我是跳转传值",)//箭头函数调用formpage组件
                  
                  //  builder:(context){
                  //    return Formpage()
                  //  }//跳转的另一写法
               ));
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary),
      ],
    );
  }
}

Tabs.dart文件
代码参考上一篇博客的这部分代码

Form.dart

import 'package:flutter/material.dart';

class Formpage extends StatelessWidget {
  //const Formpage({Key key}) : super(key: key);//构造函数或者构造方法，在这里可有可无
  
  String title;
  Formpage({this.title = "表单"});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton( //浮动按钮
        child: Text("返回"),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text("我是表单页面"),
          ),
          ListTile(
            title: Text("我是表单页面"),
          )
        ],
      ),
    );
  }
}

大家有没有什么问题呢？欢迎来问哦

Flutter普通路由的相关应用

猜你喜欢