Flutter:应用基础组件MaterialApp

xiaohai 2021-08-10 19:50:47 181人围观 标签: Flutter 
简介MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的html标签,且它自带路由、主题色,title等功能。

MaterialApp代表了Material Design设计风格的应用,是应用的最顶层,里面包含了所需要的基本组件。一个完成的应用都是从MaterialApp这个组件开始。

MaterialApp常见的属性:

  • 1、title: String类型,应用程序的标题,Android出现在任务管理器的程序快照上,IOS出现在程序切换管理器上
  • 2、theme:ThemeData类型,应用的主题颜色
  • 3、color:Color类型,应用主要的颜色
  • 4、home:Widget类型,应用首页显示的界面
  • 5、routes:Map类型,定义应用页面的跳转
  • 6、initialRoute:String,初始化路由
  • 7、onGengerateRoute:RouteFactory,路由的回调函数,当调整时,路由不存在就会调用该方法
  • 8、onLocaleChanged:当系统语言切换时,会出发这个回调
  • 9、debugShowMaterialGrid:设置为true来显示布局网格,用来调试UI的工具
  • 10、debugShowCheckedModeBanner:右上角Debug标签显示,false表示不显示
1、MaterialApp基本使用
import 'package:flutter/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: new Text('MaterialApp示例'),
        ),
        body: AppHomePage(),
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('首页'),
    );
  }
}
2、MaterialApp基本属性使用
import 'package:flutter/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: new Text('MaterialApp示例'),
        ),
        body: AppHomePage(),
      ),
      color: Colors.yellow,
      debugShowMaterialGrid: true,//显示网格
      debugShowCheckedModeBanner: false,//去掉右上角的debug
      title: 'Material Design',//标题
      theme: ThemeData(
        primaryColor: Colors.yellow[500],//设置应用的主要颜色为黄色
      ),
    );
  }
}

class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('首页'),
    );
  }
}