flutter 基本路由跳转、传参、末尾浮动按钮组件FloatingActionButton-蒲公英云

flutter 基本路由跳转、传参、末尾浮动按钮组件FloatingActionButton

路由就是组件即dart文件
1、路由跳转
    (1)在要跳转的dart文件中先导入被跳转的dart文件
    (2)在回调函数中
    (3)因为跳转的路由是单独的页面,所以没有主题样式,需要重新设置,即return配置Scaffold
        跳转到指定路由：
         Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context)=>组件名()
            )
          );
        回退到上一个路由:
         Navigator.of(context).pop();
2、跳转传参数
    无状态组件的路由
        (1)通过构造函数指定参数
        (2)在跳转的组件中:(context)=>组件名(传入参数)
    有状态组件的路由
        (1)第一个类通过构造函数指定参数并接收
        (2)在第一个类中传入参数到第二个类
        (3)第二个类通过构造函数指定参数并接收,虽然两个类是继承,但这里不能使用this获取父类的属性
3、末尾浮动组件
    (1)该按钮组件固定位置在屏幕右下角
    (2)在Scaffold中设置与appBar同级
        floatingActionButton: FloatingActionButton(
            child:组件,
            tooltip:长按显示的内容,
            onPressed: (){
                  ...
            },
        ),
        //设置按钮位置
        floatingActionButtonLocation:FloatingActionButtonLocation.endTop

代码示例:

路由待跳转文件

import 'package:flutter/material.dart';
//引入路由文件
import 'me.dart';
import 'search.dart';
class Home3 extends StatefulWidget { 
  Home3({ Key key}) : super(key: key);
  @override
  _Home3State createState() => _Home3State();
}
class _Home3State extends State<Home3> { 
  @override
  Widget build(BuildContext context) { 
    return Container(
       child:Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
         //按钮跳转
           RaisedButton(child: Text("跳到search"),
              color:Theme.of(context).accentColor,
              onPressed:(){ 
                //导航跳转
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context)=>Search(title:'哈哈哈')
                  )
                );
              }
           ),
          SizedBox(height: 20,),
          //按钮跳转
          RaisedButton(child: Text("跳到Me"),
              color:Theme.of(context).accentColor,
              onPressed:(){ 
                //导航回退
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context)=>Me(title: "哇咔咔")
                  )
                );
              }
           ),
         ],
       ),
    );
  }
}

有状态路由页面:

import 'package:flutter/material.dart';
class Me extends StatefulWidget { 
//构造函数接收参数
  String title='me';
  Me({ this.title="表单"});
  @override
  //传递给第二个子类
  _Home2State createState() => _Home2State(title2:this.title);
}
class _Home2State extends State<Me> { 
 //子类通过构造函数接收
  String title2;
  _Home2State({ this.title2='hh'});
  @override
  //这里虽然继承,但不能使用this获取父类的属性
  Widget build(BuildContext context) { 
    return Scaffold(appBar: AppBar(title: Text(this.title2),),
        body: Home(),
    );
  }
}
class Home extends StatelessWidget { 
  @override
  Widget build(BuildContext context) { 
    return Container(
      child: Text("meeee"),
    );
  }
}
/* 单独的页面没有主题样式,需要通过Scaffold自行设置 */

无状态路由页面:

import 'package:flutter/material.dart';
class Search extends StatelessWidget { 
  String title;
  //构造函数接收参数
  Search({ this.title='SEARCCC'});
  @override
  Widget build(BuildContext context) { 
    return Scaffold(
    //浮动按钮
      floatingActionButton: FloatingActionButton(
        child: Text('返回'),
        onPressed: (){ 
        //导航返回
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(title:Text(this.title)),
      body:Home()
    );
  }
}
class Home extends StatelessWidget { 
  @override
  Widget build(BuildContext context) { 
    return Container(
      child: Text("searcheeee1"),
    );
  }
}