flutter的进阶之路之Material Design与IOS风格组件

博客

Material Design风格组件

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 Design中的AppBar，也就是Android中的ToolBar。 AppBar和SliverAppBar都继承自StatefulWidget，二者的区别在于AppBar的位置是固定在应用最上面的；而SliverAppBar是能够跟随内容滚动的。

经常使用属性

属性名	类型	默认值	说明
leading	Widget	null	在标题前面显示一个组件，在首页一般显示应用的logo；其余界面一般显示返回按钮
title	Widget	null	当前界面的标题
actions	List<Widget>	null	一个Widget列表，经常使用菜单一般使用IconButton，不经常使用的一般使用PopupMenuButton显示三个点，点击后弹出二级菜单
bottom	PreferredSizeWidget	null	一般是一个TabBar。用来在标题下方显示一个Tab导航栏
elevation	double	4	控制AppBar下方阴影的高度
flexibleSpace	Widget	null	一个显示在AppBar下方的组件，高度和AppBar同样，能够实现一些特殊的效果，该属性一般在SliverAppBar中使用
backgroundColor	Color	ThemeData.primaryColor	背景色
brightness	Brightness	ThemeData.primaryColorBrightness	AppBar的亮度，有白色和黑色两种主题
iconTheme	IconThemeData	ThemeData.primaryIconTheme	AppBar上图标的颜色、透明度和尺寸信息
textTheme	TextTheme	ThemeData.primaryTextTheme	AppBar上文字样式
centerTitle	bool	-	标题是否居中显示，不一样操做系统，显示方式不同

2.4 BottomNavigatorBar(底部导航栏)

BottomNavigatorBar是底部导航栏，能够很容易地在tab之间切换和浏览顶级视图。

常见属性

属性名	类型	说明
currentIndex	int	当前索引
fixedColor	Color	选中按钮的颜色。不指定则使用系统主题色
iconSize	double	按钮图形大小
items	List<BottomNavigatorBarItem>	底部导航栏按钮集。每一项是一个BottomNavigatorBarItem，包含icon图标和title文本
onTap	ValueChanged<int>	按下按钮的回调事件。须要根据返回的索引设置当前索引

2.5 TabBar(水平选项卡及视图组件)

TabBar是一个显示水平选项卡的Material Design组件，一般须要配套Tab选项组件及TabBarView页面视图组件一块儿使用。 TabBar常见属性

属性名	类型	说明
isScrolled	bool	是否能够水平滚动
tabs	List<Widget>	Tab选项列表

Tab常见属性

属性名	类型	说明
icon	Widget	Tab图标
text	String	Tab文本

TabBarView常见属性

属性名	类型	说明
controller	TabController	指定视图的控制器
childrens	List<Widget>	视图组件的child为一个列表，一个选项卡对应一个视图

2.6 Drawer(抽屉组件)

Drawer能够实现相似抽屉拉入推出的效果，一般与ListView组合使用。

Drawer经常使用属性

属性名	类型	默认值	说明
child	Widget	-	Drawer的child能够放置任意可显示的组件
elevation	double	16	阴影尺寸

Drawer能够添加头部效果：

• DrawerHeader：展现基本信息
• UserAccountsDrawerHeader：展现用户头像、用户名、Email等信息

DrawerHeader经常使用属性

属性名	类型	说明
decoration	Decoration	header区域的decoration，一般用来设置背景颜色或背景图片
curve	Curve	若是decoration发生了变化，则会使用curve设置的变化曲线和duration设置的动画时间来作一个动画效果
child	Widget	Header里面所显示的内容控件
padding	EdgeInsetsGeometry	Header里面内容控件的padding值，若是child为null，该值无效
margin	EdgeInsetsGeometry	Header四周的间隙

UserAccountsDrawerHeader经常使用属性

属性名	类型	说明
margin	EdgeInsetsGeometry	Header四周的间隙
decoration	Decoration	header区域的decoration，一般用来设置背景颜色或背景图片
currentAccountPicture	Widget	用来设置当前用户的头像
otherAccountsPicture	Widget	用来设置当前用户其余帐号的头像
accountName	Widget	当前用户的名字
accountEmail	Widget	当前用户的Email
onDetailsPressed	VoidCallback	当accountName或者accountEmail被点击的时候所触发的回调函数，能够用来显示其余额外的信息

3. 按钮和提示组件

3.1 FloatingActionButton(悬停按钮组件)

FloatingActionButton对应一个圆形图标按钮，悬停在内容之上，以展现应用程序中的主要动做。相似IOS里的小白点。

FloatingActionButton经常使用属性

属性名	类型	默认值	说明
child	-	-	-
tooltip	-	-	-
foregroundColor	-	-	-
backgroundColor	-	-	-
elevation	-	-	-
highlightElevation	-	-	-
onPressed	-	-	-
shape	-	-	-

3.2 FlatButton(扁平按钮组件)

FlatButton是一个扁平的Material Design风格的按钮，点击时会有一个阴影效果。

3.3 PopupMenuButton(弹出菜单组件)

PopupMenuButton通常放在应用右上角，表示更多操做，菜单项使用PopupMenuItem组件。

PopupMenuButton经常使用属性

属性名	类型	说明
child	-	-
icon	-	-
itemBuilder	-	-
onSelected	-	-

3.4 SimpleDialog(简单对话框组件)

SimpleDialog用于设计简单的对话框，能够显示附加的提示或操做。SimpleDialog一般须要配合SimpleDialogOption组件一块儿使用。

SimpleDialog经常使用属性

属性名	类型	说明
children	List<Widget>	对话框子项
title	Widget	一般是一个文本控件
contentPadding	EdgeInsetsGeometry	内容部分间距
titlePadding	EdgeInsetsGeometry	标题部分间距

• 一般对话框都是由某个动做来触发渲染的，好比点击按钮，点击菜单等。因此对话框通常要封装在一个方法里实现。
• 另外这个过程是异步的须要加入async/await处理。

3.5 AlertDialog(提示对话框组件)

AlertDialog比SimpleDialog对话框又复杂一些，不只有提示内容，还有一些操做按钮，如肯定和取消等，内容部分能够用SingleChildScrollView进行包裹。

AlertDialog经常使用属性

属性名	类型	说明
actions	List<Widget>	对话框底部操做按钮，如肯定、取消等
title	Widget	一般是一个文本控件
contentPadding	EdgeInsetsGeometry	内容部分间距
content	Widget	内容部分，一般为对话框的提示内容
titlePadding	EdgeInsetsGeometry	标题部分间距

3.6 SnackBar(轻量提示组件)

SnackBar是一个轻量级消息提示组件，在屏幕底部显示。

SnackBar经常使用属性

属性名	类型	默认值	说明
action	SnackBarAction	-	提示消息里执行的动做，好比用户想撤销时能够点击操做
animation	Animation<double>	-	给组件添加动画效果
content	Widget	-	提示消息内容，一般为文本组件
duration	Duration	4.0秒	动画执行的时长
backgroundColor	Color	-	消息面板的背景色

4. 其余组件

4.1 TextField(文本框组件)

TextField就是用来作文本输入的组件。

• 注意与Text组件区分，Text主要用于显示文本，不接受文本输入。

TextField经常使用属性

属性名	类型	说明
maxLength	int	最大长度
maxLines	int	最大行数
autocorrect	bool	是否自动更正
autofocus	bool	是否自动对焦
obscureText	bool	是不是密码
textAlign	TextAlign	文本对齐方式
style	TextStyle	文本的样式
inputFormatters	List<TextInputFormatter>	容许的输入格式
onChanged	VoidChanged<String>	内容改变时回调
onSubmitted	VoidChanged<String>	内容提交时回调
enabled	bool	是否禁用

4.2 Card(卡片组件)

Card内容能够由大多数类型的组件构成，但一般与ListTitle一块儿使用。Card有一个child，但能够是支持多个child的Row、Column、ListView、GridView或其余小部件。默认状况下，Card将其大小缩小为0像素。可使用SizedBox来限制Card的大小。

Card经常使用属性

属性名	类型	默认值	说明
child	Widget	-	组件的子元素，任意Widget均可以
margin	EdgeInsetsGeometry	-	围绕在decoration和child以外的空白区域，不属于内容区域
shape	ShapeBorder	RoundedRectangleBorder	Card的阴影效果，默认的阴影效果为圆角的长方形边。弧度为4.0

Cupertino风格组件

1. 概述

Cupertino风格组件即IOS风格组件。主要有CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。目前组件库尚未Material Design风格组件丰富。

2. CupertinoActivityIndicator组件

IOS风格loading指示器。

经常使用属性

属性名	类型	默认值	说明
radius	double	10.0	加载图形的半径
animating	bool	true	是否播放加载动画

3 CupertinoAlertDialog

与Material Design风格的AlertDialog相似。

常见属性

属性名	类型	说明
actions	List<Widget>	对话框底部操做按钮。如肯定、取消。
title	Widget	对话框标题，一般是一个文本
content	Widget	对话框内容部分，一般为提示内容

3. CupertinoButton

IOS风格按钮。

经常使用属性

属性名	类型	默认值	说明
color	Color	-	按钮颜色
disableColor	Color	ThemeData.disabledColor	按钮禁用状态颜色
onPressed	VoidCallback	-	按钮按下时回调函数
child	Widget	-	按钮的child一般为Text文本，显示按钮名字
enable	bool	true	是否为禁用状态

4. Cupertino导航组件

4.1 CupertinoTabScaffold

选项卡组件，将选项卡按钮与选项卡视图绑定。

经常使用属性

属性名	类型	说明
tabBar	CupertinoTabBar	选项卡按钮，一般由图标和文本组成
tabBuilder	IndexedWidgetBuilder	选项卡视图构造器

4.2 CupertinoTabBar

选项卡按钮，一般由BottomNavigationBarItem组成包含图标加文本。

经常使用属性

属性名	类型	说明
items	List<BottomNavigationBarItem>	选项卡按钮集合
backgroundColor	Color	选项卡按钮背景色
activeColor	Color	选中按钮前景色
iconSize	double	选项卡图标大小

4.3 CupertinoTabView

选项卡视图。

经常使用属性

属性名	类型	说明
builder	WidgetBuilder	选项卡视图构造器
routes	Map<String, WidgetBuilder>	选项卡视图路由

4.4 CupertinoPageScaffold

页面的基本布局结构。包含内容和导航栏。

经常使用属性

属性名	类型	说明
backgroudColor	Color	页面背景色
navigationBar	ObstructingPreferredSizeWidget	顶部导航栏按钮。包含左中右三个子组件
child	Widget	页面的主要内容

4.5 CupertinoNavigationBar

导航栏结构组件。

经常使用属性

属性名	类型	说明
middle	Widget	导航栏中间组件，一般为页面标题
trailing	Widget	导航栏右边组件，一般为菜单按钮
leading	Widget	导航栏左边组件，一般为返回按钮