1. 概述
Material Design是由谷歌推出的全新设计语言,这种设计语言旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉。Material Design风格是一直非常有质感的设计风格,并会提供一些默认的交互动画。
2. App结构和导航组件
2.1 MaterialApp(应用组件)
MaterialApp代表使用Material Design风格的应用,里面包含了其他所需的基本控件。官方提供的示例demo就是从MaterialApp这个主组件开始的。
MaterialApp组件常见属性
属性名 | 类型 | 说明 |
---|---|---|
title | String | 应用程序的标题。该标题出现在以下位置:Android:任务管理器的程序快照上; IOS:程序切换管理器中 |
theme | ThemeData | 定义应用所使用的主题颜色,可以指定主题中每个控件的颜色 |
color | Color | 应用的主要颜色值,即primary color |
home | Widget | 用来定义当前应用打开时所显示的界面 |
routes | Map<String, WidgetBuilder> | 定义应用中页面跳转规则 |
initialRoute | String | 初始化路由 |
onGenerateRoute | RouteFactory | 路由回调函数。当通过Navigator.of(context).pushNamed跳转路由的时候,在routes查找不到时,会调用该方法 |
onLocaleChanged | - | 当系统修改语言的时候,会触发这个回调 |
navigatorObservers | List<NavigatorObserver> | 导航观察器 |
debugShowMaterialGrid | bool | 是否显示布局网格,用来调试UI的工具 |
showPerformanceOverlay | bool | 显示性能标签 |
2.1.1 设置主页
使用home属性设置应用的主页,即整个应用的主组件。
2.1.2 路由处理
routes对象是一个Map<String, WidgetBuilder>。当使用Navigator.pushNamed来跳转路由的时候,通过routes查找路由名字,然后使用对应的WidgetBuilder来构造一个带有页面切换动画的MaterialPageRoute。如果应用只有一个界面,则不用设置整个属性,使用home即可。
2.1.3 自定义主题
应用程序的主题,各种定制的颜色都可以设置,用于程序主题切换。
2.2 Scaffold(脚手架组件)
Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个界面显示的布局组件元素,都可以使用Scaffold来绘制。
常用属性
属性名 | 类型 | 说明 |
---|---|---|
appBar | AppBar | 显示在界面顶部的一个AppBar |
body | Widget | 当前界面所显示的主要内容 |
floatingActionButton | Widget | 在Material Design中定义的一个功能按钮 |
persistentFooterButtons | List< Widget> | 固定在下方显示的按钮 |
drawer | Widget | 侧边栏组件 |
bottomNavigatorBar | Widget | 显示在底部的导航栏 |
backgroudColor | Color | 背景颜色 |
resizeToAvoidBottomPadding | bool | 控制界面内容body是否重新布局来避免底部被覆盖,比如当键盘显示时,重新布局避免键盘盖住内容。默认为true |
2.3 AppBar(应用按钮组件)
应用按钮组件有AppBar和SliverAppBar。它们是Material D