flutter开发进阶之路:Material Design与IOS风格组件

2019年9月6日05:31:04 发表评论 54 views

Material Design风格组件

1. 概述

Material Design是由谷歌推出的全新设计语言,这种设计语言旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉。Material Design风格是一直非常有质感的设计风格,并会提供一些默认的交互动画。

2. App结构和导航组件

2.1 MaterialApp(应用组件)

MaterialApp代表使用Material Design风格的应用,里面包含了其他所需的基本控件。官方提供的示例demo就是从MaterialApp这个主组件开始的。

MaterialApp组件常见属性

属性名类型说明
titleString应用程序的标题。该标题出现在以下位置:Android:任务管理器的程序快照上; IOS:程序切换管理器中
themeThemeData定义应用所使用的主题颜色,可以指定主题中每个控件的颜色
colorColor应用的主要颜色值,即primary color
homeWidget用来定义当前应用打开时所显示的界面
routesMap<String, WidgetBuilder>定义应用中页面跳转规则
initialRouteString初始化路由
onGenerateRouteRouteFactory路由回调函数。当通过Navigator.of(context).pushNamed跳转路由的时候,在routes查找不到时,会调用该方法
onLocaleChanged-当系统修改语言的时候,会触发这个回调
navigatorObserversList<NavigatorObserver>导航观察器
debugShowMaterialGridbool是否显示布局网格,用来调试UI的工具
showPerformanceOverlaybool显示性能标签

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来绘制。

常用属性

属性名类型说明
appBarAppBar显示在界面顶部的一个AppBar
bodyWidget当前界面所显示的主要内容
floatingActionButtonWidget在Material Design中定义的一个功能按钮
persistentFooterButtonsList< Widget>固定在下方显示的按钮
drawerWidget侧边栏组件
bottomNavigatorBarWidget显示在底部的导航栏
backgroudColorColor背景颜色
resizeToAvoidBottomPaddingbool控制界面内容body是否重新布局来避免底部被覆盖,比如当键盘显示时,重新布局避免键盘盖住内容。默认为true

2.3 AppBar(应用按钮组件)

应用按钮组件有AppBar和SliverAppBar。它们是Material Design中的AppBar,也就是Android中的ToolBar。 AppBar和SliverAppBar都继承自StatefulWidget,两者的区别在于AppBar的位置是固定在应用最上面的;而SliverAppBar是可以跟随内容滚动的。

常用属性

属性名类型默认值说明
leadingWidgetnull在标题前面显示一个组件,在首页通常显示应用的logo;其他界面通常显示返回按钮
titleWidgetnull当前界面的标题
actionsList<Widget>null一个Widget列表,常用菜单通常使用IconButton,不常用的通常使用PopupMenuButton显示三个点,点击后弹出二级菜单
bottomPreferredSizeWidgetnull通常是一个TabBar。用来在标题下方显示一个Tab导航栏
elevationdouble4控制AppBar下方阴影的高度
flexibleSpaceWidgetnull一个显示在AppBar下方的组件,高度和AppBar一样,可以实现一些特殊的效果,该属性通常在SliverAppBar中使用
backgroundColorColorThemeData.primaryColor背景色
brightnessBrightnessThemeData.primaryColorBrightnessAppBar的亮度,有白色和黑色两种主题
iconThemeIconThemeDataThemeData.primaryIconThemeAppBar上图标的颜色、透明度和尺寸信息
textThemeTextThemeThemeData.primaryTextThemeAppBar上文字样式
centerTitlebool-标题是否居中显示,不同操作系统,显示方式不一样

2.4 BottomNavigatorBar(底部导航栏)

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

常见属性

属性名类型说明
currentIndexint当前索引
fixedColorColor选中按钮的颜色。不指定则使用系统主题色
iconSizedouble按钮图形大小
itemsList<BottomNavigatorBarItem>底部导航栏按钮集。每一项是一个BottomNavigatorBarItem,包含icon图标和title文本
onTapValueChanged<int>按下按钮的回调事件。需要根据返回的索引设置当前索引

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

TabBar是一个显示水平选项卡的Material Design组件,通常需要配套Tab选项组件及TabBarView页面视图组件一起使用。 TabBar常见属性

属性名类型说明
isScrolledbool是否可以水平滚动
tabsList<Widget>Tab选项列表

Tab常见属性

属性名类型说明
iconWidgetTab图标
textStringTab文本

TabBarView常见属性

属性名类型说明
controllerTabController指定视图的控制器
childrensList<Widget>视图组件的child为一个列表,一个选项卡对应一个视图

2.6 Drawer(抽屉组件)

Drawer可以实现类似抽屉拉入推出的效果,通常与ListView组合使用。

Drawer常用属性

属性名类型默认值说明
childWidget-Drawer的child可以放置任意可显示的组件
elevationdouble16阴影尺寸

Drawer可以添加头部效果:

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

DrawerHeader常用属性

属性名类型说明
decorationDecorationheader区域的decoration,通常用来设置背景颜色或背景图片
curveCurve如果decoration发生了变化,则会使用curve设置的变化曲线和duration设置的动画时间来做一个动画效果
childWidgetHeader里面所显示的内容控件
paddingEdgeInsetsGeometryHeader里面内容控件的padding值,如果child为null,该值无效
marginEdgeInsetsGeometryHeader四周的间隙

UserAccountsDrawerHeader常用属性

属性名类型说明
marginEdgeInsetsGeometryHeader四周的间隙
decorationDecorationheader区域的decoration,通常用来设置背景颜色或背景图片
currentAccountPictureWidget用来设置当前用户的头像
otherAccountsPictureWidget用来设置当前用户其他账号的头像
accountNameWidget当前用户的名字
accountEmailWidget当前用户的Email
onDetailsPressedVoidCallback当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常用属性

属性名类型说明
childrenList<Widget>对话框子项
titleWidget通常是一个文本控件
contentPaddingEdgeInsetsGeometry内容部分间距
titlePaddingEdgeInsetsGeometry标题部分间距
  • 通常对话框都是由某个动作来触发渲染的,比如点击按钮,点击菜单等。所以对话框一般要封装在一个方法里实现。
  • 另外这个过程是异步的需要加入async/await处理。

3.5 AlertDialog(提示对话框组件)

AlertDialog比SimpleDialog对话框又复杂一些,不仅有提示内容,还有一些操作按钮,如确定和取消等,内容部分可以用SingleChildScrollView进行包裹。

AlertDialog常用属性

属性名类型说明
actionsList<Widget>对话框底部操作按钮,如确定、取消等
titleWidget通常是一个文本控件
contentPaddingEdgeInsetsGeometry内容部分间距
contentWidget内容部分,通常为对话框的提示内容
titlePaddingEdgeInsetsGeometry标题部分间距

3.6 SnackBar(轻量提示组件)

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

SnackBar常用属性

属性名类型默认值说明
actionSnackBarAction-提示消息里执行的动作,比如用户想撤销时可以点击操作
animationAnimation<double>-给组件添加动画效果
contentWidget-提示消息内容,通常为文本组件
durationDuration4.0秒动画执行的时长
backgroundColorColor-消息面板的背景色

4. 其他组件

4.1 TextField(文本框组件)

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

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

TextField常用属性

属性名类型说明
maxLengthint最大长度
maxLinesint最大行数
autocorrectbool是否自动更正
autofocusbool是否自动对焦
obscureTextbool是否是密码
textAlignTextAlign文本对齐方式
styleTextStyle文本的样式
inputFormattersList<TextInputFormatter>允许的输入格式
onChangedVoidChanged<String>内容改变时回调
onSubmittedVoidChanged<String>内容提交时回调
enabledbool是否禁用

4.2 Card(卡片组件)

Card内容可以由大多数类型的组件构成,但通常与ListTitle一起使用。Card有一个child,但可以是支持多个child的Row、Column、ListView、GridView或其他小部件。默认情况下,Card将其大小缩小为0像素。可以使用SizedBox来限制Card的大小。

Card常用属性

属性名类型默认值说明
childWidget-组件的子元素,任意Widget都可以
marginEdgeInsetsGeometry-围绕在decoration和child之外的空白区域,不属于内容区域
shapeShapeBorderRoundedRectangleBorderCard的阴影效果,默认的阴影效果为圆角的长方形边。弧度为4.0

Cupertino风格组件

1. 概述

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

2. CupertinoActivityIndicator组件

IOS风格loading指示器。

常用属性

属性名类型默认值说明
radiusdouble10.0加载图形的半径
animatingbooltrue是否播放加载动画

3 CupertinoAlertDialog

与Material Design风格的AlertDialog类似。

常见属性

属性名类型说明
actionsList<Widget>对话框底部操作按钮。如确定、取消。
titleWidget对话框标题,通常是一个文本
contentWidget对话框内容部分,通常为提示内容

3. CupertinoButton

IOS风格按钮。

常用属性

属性名类型默认值说明
colorColor-按钮颜色
disableColorColorThemeData.disabledColor按钮禁用状态颜色
onPressedVoidCallback-按钮按下时回调函数
childWidget-按钮的child通常为Text文本,显示按钮名字
enablebooltrue是否为禁用状态

4. Cupertino导航组件

4.1 CupertinoTabScaffold

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

常用属性

属性名类型说明
tabBarCupertinoTabBar选项卡按钮,通常由图标和文本组成
tabBuilderIndexedWidgetBuilder选项卡视图构造器

4.2 CupertinoTabBar

选项卡按钮,通常由BottomNavigationBarItem组成包含图标加文本。

常用属性

属性名类型说明
itemsList<BottomNavigationBarItem>选项卡按钮集合
backgroundColorColor选项卡按钮背景色
activeColorColor选中按钮前景色
iconSizedouble选项卡图标大小

4.3 CupertinoTabView

选项卡视图。

常用属性

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

4.4 CupertinoPageScaffold

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

常用属性

属性名类型说明
backgroudColorColor页面背景色
navigationBarObstructingPreferredSizeWidget顶部导航栏按钮。包含左中右三个子组件
childWidget页面的主要内容

4.5 CupertinoNavigationBar

导航栏结构组件。

常用属性

属性名类型说明
middleWidget导航栏中间组件,通常为页面标题
trailingWidget导航栏右边组件,通常为菜单按钮
leadingWidget导航栏左边组件,通常为返回按钮

作者:praise

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: