Flutter笔记38：MaterialApp常见属性

Flutter的app风格主要有两种：Material和Cupertino。这里记录下Material的主要常用属性：
      title:任务管理窗口中显示的名称
      theme:应用各种UI所使用的主题颜色
      color:应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色
      home:应用默认所显示的界面 Widget
      routes：应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，类似于网页的网址
      initialRoute：第一个显示的路由名字，默认值为 Window.defaultRouteName
      onGenerateRoute：生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面
      onLocaleChanged：当系统修改语言时，会触发这个回调函数
      navigatorObservers：应用navigator的监听器
      debugShowMaterialGrid：是否显示 Material design 基础布局网格，用来调试UI的工具
      showPerformanceOverlay: 显示性能标签
      checkerboardRasterCacheImages、showSemanticsDebugger、debugShowCheckedModeBanner 各种调试开关

下面是路由的用法，注意home和initialRoute不能同时存在，二者都表示默认显示的页面，会冲突。而如果routes中，包含路由'/'时，也不能和home同时存在，因为'/'也表示首页，home也表示首页，也会冲突

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      title: 'MarerialApp示例',
      theme: ThemeData(primaryColor: Colors.red),
      //默认显示的路由，如果不是在routes中定义的首页，则左上角会显示返回按钮
      initialRoute: '/second',
      routes: <String, WidgetBuilder>{
        // '/' 表示首页
        '/': (BuildContext context) => FirstScreen(),
        '/second': (BuildContext context) => SecondScreen(),
      },
      //home和上面的 initialRoute不能同时存在，home表示首页，而routes中定义的 '/'也是首页，会和home冲突。
      // home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FirstScreen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {},
          child: Text('First Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {},
          child: Text('Second Screen'),
        ),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！