Flutter:应用基础组件MaterialApp
简介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('首页'),
);
}
}