首页 > 建站教程 > APP开发,混合APP >  Flutter笔记38:MaterialApp常见属性正文

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