Flutter学习笔记：MaterialApp应用组件及路由详解

terry 2年前 (2023-09-23) 阅读数 65 #移动小程序

下面我们来说一下MaterialApp应用组件及路由的详解。我将重点关注路由的使用和解释，因为它们将被广泛使用，并且我之前编写的一些演示涉及所有遵循 Material Design 设计风格的组件。所谓Material Design，是Goodle推出的一种新的设计语言。此设计旨在跨手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观。和感觉，接下来我们看一下通用的Material Design风格组件：

Material Design风格组件说明

组件名称	中文名称	简单描述
Appbar	应用按钮组件	应用程序工具按钮
AlertDialog	对话框组件	带有操作按钮的对话框
BottomNavigationBar	底部导航组件	底部导航栏，您可以轻松地在选项卡之间切换并浏览顶部视图
映射映射组件	映射带有边缘的映射组件
绘图
抽屉	抽屉组件	抽屉抽屉组件可以实现类似于被拉开的抽屉的效果	浮动按钮组件	应用操作按钮的关键功能
FlatButton	平面按钮组件	平面样式按钮
材质应用程序	材质应用组件 MaterialApp代表使用纸墨设计风格的应用
P opupMenuButton	Popupmenu组件	弹出菜单按钮
Scaffold	Scaffold组件	实现了基本的Material Design布局
S nackBar 轻量级提示组件	轻量级消息提示组件，显示在
SimpleDialog 屏幕底部简单对话框组件	简单对话框组件。它仅用作提示，没有交互
TabBar	水平选项卡和显示组件	显示水平选项卡的 Material Design 组件
TextField	文本框组件	可以接受应用程序输入文本的组件

有很多 Material Design 风格的组件，你赢了我只有当你看到它时才知道。我一看就震惊了。简而言之，我从来没有使用过它。这是一个漫长的旅程，还有很长的路要走。我们来一一学习吧！！！

MaterialApp（应用程序组件）

MaterialApp 组件属性和描述

属性名称	类型	描述
标题	字符串	标题应用程序，看起来像这样位置 Android：任务管理器程序快照上方，iOS：程序切换管理器中的
theme	ThemeData	定义了应用程序使用的主题颜色，可以指定一个主题中每个控件的颜色
color	Color	应用程序的主要颜色值，即原色
home	Widget	这是一个Widget对象，用于设置主题中每个控件的颜色
routes	Map	定义应用中页面跳转的原理
initialRoute	String	初始化路由
onGenerateRoute	RouteFactory	路由回调函数，如果通过 Nacigator.of(context).pushNamed 跳转到路由时，如果找不到路由，则调用此方法
onLocaleChanged		当系统需要更改语言时，会触发此回调
nagavitorObserver	列表	Navigator 观察者
debugShowMaterialGird	bool	是否显示纸张和墨水设计的基本布局网格，用户界面调试工具
ShowperFormanceOverlay	Bool	显示性能标签

Flutter学习笔记：MaterialApp应用组件及routes路由详解

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'),
      ),
    );
  }
}

Flutter学习笔记：MaterialApp应用组件及routes路由详解

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'),
      ),
    );
  }
}

Flutter学习笔记：MaterialApp应用组件及routes路由详解

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'),
      ),
    );
  }
}

效果图：

Flutter学习笔记：MaterialApp应用组件及routes路由详解演示一主要尝试了Title、Theme、home、debugShowMaterialGird和showPerformanceOverlay属性。根据截图我给大家直观的对比一下结果：

title：应用程序的标题（因为我只有安卓测试机），可以看到第二张截图，切换到任务管理器，应用程序是称为 MaterialApp 示例。

主题：我使用主题来更改应用程序主题的颜色。您可以看到第一个屏幕截图中导航栏的颜色已更改为橙色。

home：Home代表整个页面的主要widget，可以理解为根widget。 home 的主要部分是 Center 容器组件，然后在其中放置文本。

debugShowMaterialGird：我们将此属性设置为 true。页面渲染的时候会有很多网格，是用来调试UI的（怎么用这个来调试UI，我还不知道……）

showPerformanceOverlay：性能标签，如果这个如果设置为 true，一些与性能相关的数据将出现在页面顶部。

routes（路线处理）

routes 对象是一个 Map。使用Navigator.pushName进行路由时，在routes中找到路由的名称，然后使用关联的WidgetBuilder构建路由，使用MaterialPageRoute进行页面切换动画。

现在我重点讲一下路由处理，因为我觉得页面之间的跳转是用得最多的，也是非常重要的。下面这个demo的主要功能是点击A页面的一个按钮，转到B页面，并在页面之间传递两个值。

注：路由跳转分为静态路由跳转和动态路由跳转。两者的区别在于是否向第二页传递值 Flutter学习笔记：MaterialApp应用组件及routes路由详解

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("这个是从第二个页面返回的数据");//给上一级页面返回参数
          }
      ),
    );
  }
}

效果截图：

Flutter学习笔记：MaterialApp应用组件及routes路由详解

我们来详细讨论一下上面的代码，不然会很混乱。

1。首先初始化路由表，为后续的页面跳转做准备。路由列表对应每个页面3

3。动态路由跳转，A页面跳转到B页面，将值传给B页面，赋值B页面的按钮副本，从B页面返回后，吐司B页面的返回值，如图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 带参数返回7 嗯，我写的demo还是总是很简单的。页面跳转时传递的值只是一个字符串。在项目中你还会遇到其他类型的数据参数。我暂时不会研究它。我用的时候会仔细看看。