如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!!

今天给大家讲一下MaterialApp应用组件及routes路由详解,我会着重说一下routes路由的使用及解释,因为会经常用到,前面我写的一些demo所涉及到的组件,都是遵循着Material Design设计风格,所谓的Material Design是由Goodle推出的全新的设计语言,这种设计旨在为手机、平板电脑、台式机和其他平台更一致、更广泛的外观和感觉,接下来我们看一下常见的Material Design风格组件:

Material Design风格组件说明
组件名称 中文名称 简单说明
Appbar 应用按钮组件 应用的工具按钮
AlertDialog 对话框组件 有操作按钮的对话框
BottomNavigationBar 底部导航组件 底部导航条,可以很容易的在tab之间切换和浏览顶级试图
Card 卡片组件 带有边框阴影的卡片组件
Drawer 抽屉组件 Drawer抽屉组件可以实现类似抽屉拉开关闭的效果
FloatingActionButton 悬浮按钮组件 应用的主要功能操作按钮
FlatButton 扁平按钮组件 扁平化风格的按钮
MaterialApp Material应用组件 MaterialApp代表使用纸墨设计风格的应用
PopupMenuButton 弹出菜单组件 弹出菜单按钮
Scaffold 脚手架组件 实现了基本的Material Design布局
SnackBar 轻量提示组件 一个轻量消息提示组件,在屏幕的底部显示
SimpileDialog 简单对话框组件 简单对话框组件。只起提示作用,没有交互
TabBar 水平选项卡及视图组件 一个显示水平选项卡的Material Design组件
TextField 文本框组件 可以接受应用输入文本的组件

Material Design风格的组件有这么多,不看不知道,一看吓一跳,这基本上都没有用过呀,漫漫长征路,还有很远要走呀,一个一个学吧!!!

  • MaterialApp(应用组件)

MaterialApp组件属性及描述
属性名 类型 说明
title String 应用程序的标题,该标题出现在如下位置Android:任务管理器的程序快照之上,iOS:程序切换管理器中
theme ThemeData 定义应用所使用的主题颜色,可以制定一个主题中每个控件的颜色
color Color 应用的主要颜色值,即primary color
home Widget 这个是一个Widget对象,用来定义一个主题中每个控件的颜色
routes Map<String,WidgetBuilder> 定义应用中页面跳转的原则
initialRoute String 初始化路由
onGenerateRoute RouteFactory 路由回调函数,当通过Nacigator.of(context).pushNamed跳转路由时,在routes查找不到时,会调用该方法
onLocaleChanged   当系统需改语言的时候,会触发这个回调
nagavitorObserver List<NavigatorObserver> 导航观察器
debugShowMaterialGird bool 是否显示纸墨设计基础布局网格,用来调试UI的工具
showPerformanceOverlay bool 显示性能标签

具体看下代码应用:

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

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

class DemoApp extends StatelessWidget{
  //这个是整个应用的主组件
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'MaterialApp示例',
      debugShowMaterialGrid: true,
      showPerformanceOverlay: true,
      theme: new ThemeData(
        primaryColor: Colors.deepOrange
      ),
      home: new MaterialAppDemo(),
    );
  }
}

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text('MaterialAppDemo'),
      ),
      body: new Center(
        child: new Text('MaterialAppDemo'),
      ),
    );
  }
}

效果图:

                       

demo里面我主要尝试了title、theme、home、debugShowMaterialGird、showPerformanceOverlay属性,根据截图,给大家直观的对比一下结果:

title:应用程序的标题(因为我只有Android测试机),可以看到第二张截图,切到任务管理器,应用程序的标题为MaterialApp示例。

theme:我用theme更改了应用主题的颜色,可以看到第一张截图导航栏的颜色改为了橙色。

home:home代表着整个页面的主widget,可以理解为根widget,而home的主体就是一个Center容器组件,然后里面放一个文本。

debugShowMaterialGird:这个属性我们设置为了true,页面展示出来会有很多网格,用于调试UI(这个要怎么用来调试UI,小弟还不会。。。)

showPerformanceOverlay:性能标签,这个设置为true,在页面的最上方会出现一些性能相关的数据。

  • routes(路由处理)

下面我着重讲一下routes路由处理,因为我觉得页面间的跳转是最常用到的,而且很重要,下面的demo主要功能是在A页面点击一个按钮跳转到B页面,并且两个页面间传值。

注:路由跳转分静态路由跳转和动态路由跳转,两者的区别就是是否给第二个页面传值

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

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

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'theme Title',
      debugShowMaterialGrid: false,
      home: new Scaffold(
        appBar: new AppBar(
          leading: Icon(Icons.menu),
          actions: <Widget>[
            Icon(Icons.search)
          ],
          title: new Text('routes demo'),
        ),
        body: new Center(
          child: new Text('主页'),
        ),
      ),
      routes: {
        '/first':(BuildContext context) => new FirstPage(),
        '/second':(BuildContext context) => new SecondPage(""),
      },
      initialRoute: '/first',//初始化路由为first页面
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      ),
      body: new Center(
        child: RaisedButton(
          child: new Text('第一个页面'),
            onPressed: (){
                //静态路由跳转,不给第二个页面传值
//              Navigator.pushNamed(context, '/second').then((value){
//                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
//              });
              //动态路由跳转,给第二个页面传值
              Navigator.of(context).push(new MaterialPageRoute(builder: (context){
                return new SecondPage('这是从第一个页面传递出去的数据');
              })).then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });
            }
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  var content = '';
  SecondPage(this.content);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Page'),
      ),
      body: new RaisedButton(
        child: new Text(content),
          onPressed: (){
//            Navigator.pop(context);//不给上一级页面返回参数
            Navigator.of(context).pop("这个是从第二个页面返回的数据");//给上一级页面返回参数
          }
      ),
    );
  }
}

效果截图:

     

来细讲一下上面的代码吧,要不然还真容易看懵逼了。

1.首先初始化路由列表,为后面页面跳转做准备,路由列表对应这每一个页面

routes: {
        '/first':(BuildContext context) => new FirstPage(),
        '/second':(BuildContext context) => new SecondPage(""),
      },

2.静态路由跳转,静态由A页面跳转到B页面,不给B页面传值,但是接收B页面返回的数据,并将返回值toast出来,即图3

Navigator.pushNamed(context, '/second').then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });

3.动态路由跳转,A页面跳转到B页面,并给B页面传值,将B页面的按钮文案赋值,从B页面返回后,将B页面的返回值toast出来,即图2,图3

Navigator.of(context).push(new MaterialPageRoute(builder: (context){
                return new SecondPage('这是从第一个页面传递出去的数据');
              })).then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });

4.由B页面带数据返回到A页面(页面Pop返回有两类,一类带参数返回,一类不带参数返回)

4.1带参数返回

Navigator.of(context).pop("这个是从第二个页面返回的数据");//给上一级页面返回参数

4.2不带参数返回

Navigator.pop(context);//不给上一级页面返回参数

注:页面Pop还有两个方法常用到

Navigator.canPop(context);//页面是否可以pop,返回bool值,可以用作页面判断
Navigator.maybePop(context);//如果当前页面可以pop,则会执行,反之则不会执行,更安全

以上就是今天的全部内容了,稍微难一点的就是路由这块儿了,我写的demo还是很简单的,页面跳转传值只是字符串,在项目中还会遇到其他类型的数据参数,暂时就先不研究了,等用到的时候在具体细看吧,上面的内容,如果各位有任何疑问,或者发现有错误的地方,还望留言!!!

Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解的更多相关文章

  1. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  2. qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)

    原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...

  3. 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  4. &lt;转&gt;ASP.NET学习笔记之MVC 3 数据验证 Model Validation 详解

    MVC 3 数据验证 Model Validation 详解  再附加一些比较好的验证详解:(以下均为引用) 1.asp.net mvc3 的数据验证(一) - zhangkai2237 - 博客园 ...

  5. [原创]java WEB学习笔记43:jstl 介绍,core库详解:表达式操作,流程控制,迭代操作,url操作

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. Android开发学习笔记:Intent的简介以及属性的详解【转】

    一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述 ...

  7. 【转载】Android开发学习笔记:Intent的简介以及属性的详解

    http://liangruijun.blog.51cto.com/3061169/634411/ 一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent ...

  8. [ 原创 ]学习笔记-Android 学习笔记 Contacts (一)ContentResolver query 参数详解 [转载]

    此博文转载自:http://blog.csdn.net/wssiqi/article/details/8132603 1.获取联系人姓名 一个简单的例子,这个函数获取设备上所有的联系人ID和联系人NA ...

  9. es6学习笔记(1) let和const命令详解

    let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...

  10. 【精选】Nginx模块Lua-Nginx-Module学习笔记(一)Nginx Lua API 接口详解

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis 一.介绍 各种* _by_lua,* _by_lua_block和* _by_lua_file配置指令用 ...

随机推荐

  1. C#设计模式系列:观察者模式(Observer)

    在软件构建过程中,需要为某些对象建立一种“通知依赖关系”,即一个对象的状态发生改变,所有的依赖对象都需要得到通知. 1.观察者模式简介 1.1>.定义 定义对象间的一种一对多的依赖关系,当一个对 ...

  2. js函数传参

    函数传参:重用代码,首先保持html代码相对一致,把核心主程序用函数包起来,把每组不同的值找出来,通过传参的方式减少代码的使用 下面代码是我早期练习的,大家随便看看就好 <!DOCTYPE ht ...

  3. mongodb unclean shutdown 修复方法

    启动mongodb时,提示Unclean shutdown detected mongodb,解决方法很简单 mongod --repair --dbpath D:\MongoDB\data\db

  4. margin:0 auto;不能居中的原因

    原因: 1.没有设置本身元素和父元素的宽度 2.本身元素使用了绝对定位和浮动 2.没声明DOCTYPE

  5. javascript 构造函数方式定义对象

    javascript是动态语言,可以在运行时给对象添加属性,也可以给对象删除(delete)属性 <html> <head> <script type="tex ...

  6. C++输出hello world 详细注释

    /* #include<iostream> #:预处理标志,后面跟预处理指令,include:预处理指令,包含 <iostream>:c++头文件,输入输出流 这行的作用就是在 ...

  7. Delphi 全面控制Windows任务栏

    核心提示:使用Windows95/NT/98操作系统的用户知道:Windows正常启动后,在电脑屏幕下方出现一块 任务栏. 使用Windows95/NT/98操作系统的用户知道:Windows正常启动 ...

  8. 【分布式】ZooKeeper学习之一:安装及命令行使用

    ZooKeeper学习之一:安装及命令行使用 一直都想着好好学一学分布式系统,但是这拖延症晚期也是没得治了,所以干脆强迫自己来写一个系列博客,从zk的安装使用.客户端调用.涉及到的分布式原理.选举过程 ...

  9. selenium+java破解极验滑动验证码的示例代码

    转自: https://www.jianshu.com/p/1466f1ba3275 selenium+java破解极验滑动验证码 卧颜沉默 关注 2017.08.15 20:07* 字数 3085  ...

  10. 利用window.performance.timing进行性能分析

    性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个 ...