Flutter 开发进阶之路：Material Design 和 IOS 风格组件

terry 2年前 (2023-09-23) 阅读数 68 #移动小程序

Material Design 风格组件

1.概述

Material Design 是 Google 推出的一种新的设计语言。这种设计语言是为手机和平板电脑设计的。 PC、台式机和其他平台提供更一致、更广泛的外观和感觉。 Material Design风格一直是很有质感的设计风格，会提供一些标准的交互动画。

2。应用程序结构和导航组件

2.1 MaterialApp（应用程序组件）

MaterialApp 表示使用 Material Design 风格的应用程序，其中包含其他必要的基本控件。官方提供的示例demo是从主组件MaterialApp开始的。

MaterialApp 组件公共属性

属性名称

类型

描述标题应用程序的标题。该标题出现在以下位置： Android：在应用程序的任务管理器快照上； IOS：在应用程序切换管理器中

主题

ThemeData

定义应用程序使用的主题颜色，可以指定主题中的各个控件颜色颜色应用程序最重要的颜色值，即即原色

home

Widget

用于定义当前应用打开时显示的界面

router ap。

在应用程序中定义页面跳转规则

initialRoute

String

初始化路由

onGenerate 路由回调函数。通过 Navigator.of(context).pushNamed 跳过路由时，找不到路由时会调用该方法

onLocaleChanged

当系统更改语言时，会触发该回调 navigatorObservers

List

Navigation Observer

debugShowMaterialGridbool 显示布局工具调试 UI

show PerformanceOverlay

bool

显示性能标签

2.1.1 设置主页

使用home-属性来指定应用程序的主页，它是整个应用程序的主要组成部分。

2.1.2 路由处理

router 对象是一个 Map。使用Navigator.pushNamed跳转到某个路由时，通过routes找到路由名称，然后使用对应的WidgetBuilder构造一个带有换页动画的MaterialPageRoute。如果应用程序只有一个接口，则无需指定整个属性，在家中使用即可。

2.1.3 自定义主题

应用程序的主题，可设置各种自定义颜色进行应用程序主题切换。

2.2 Scaffold（脚手架组件）

Scaffold 实现了基本的材质设计布局。只要在Material Design中定义了单个界面上显示的布局组件元素，就可以使用Scaffold来绘制它们。

常用属性

属性名称	类型	描述
appBarBBarBar 界面顶部 body	widget	当前界面显示的主要内容
floatingActionButton	Widget	Material Design 中定义的功能按钮
持久页脚按钮
抽屉 Widget	侧边栏组件
bottomNavigatorBar	Widget	显示导航栏底部bakeror Color	backgroundcolor
调整大小以避免底部填充	bool	检查界面内容是否重新布局避免覆盖底部。例如，当显示键盘时，进行重新布局，防止键盘遮盖内容。默认为true

2.3 AppBar（应用程序按钮组件）

应用程序按钮组件包括AppBar和SliverAppBar。它们就是Material Design中的AppBar，也就是Android中的工具栏。 AppBar和SliverAppBar都继承自StatefulWidget。两者的区别在于AppBar的位置固定在应用程序的顶部；而 SliverAppBar 可以滚动其内容。？ null

在标题之前显示组件，通常在主页上显示应用程序。标志；其他界面通常显示后退按钮

title

Widget

null

当前界面的标题 >> null 一个小组件列表，常用菜单常用IconButton，不常见的通常使用PopupMenuButton来显示三个点。点击后，二级菜单

bottom

PreferredSizeWidget

null

通常是一个标签栏。用于显示标题下方的选项卡导航栏

Elevation

double

控制Appbar下方的阴影高度

Flexiblespacennnnnnnnaaaa appbar下方的组件，例如高度，诸如高度，可以达到一些特殊的效果。该属性通常用在 SliverAppBar

backgroundColor

Color

ThemeData.primaryColor

BackgroundColorBright亮度

ThemeData.primaryColorBrightness

AppBar的亮度，有白色和黑色两种主题. iconTheme

IconThemeData

ThemeData.primaryIconTheme

图标me的颜色、透明度以及图标me

TextTheme

The我的数据。 PrimaryTextTheme

AppBar上的文字样式

centertitle

BOOL

标题是否居中、不同操作系统、不同显示方式

2.4 BottomNavigatorBar （底部导航栏）是一个底部导航栏，可以轻松地在选项卡之间切换并导航顶级视图。

常用属性

属性名称	类型	描述
currentIndex❀ururur
fix edColor 颜色	所选按钮的颜色。如果不指定，则使用系统主题颜色。每个项目都是一个 BottomNavigatorBarItem，包含图标图标和标题文本
onTap	ValueChanged	按下按钮的回调事件。当前索引必须根据返回的索引设置

2.5 TabBar（水平选项卡和显示组件）

TabBar 是一个显示水平选项卡的 Material Design 组件。通常需要与 Tab Options 组件和 TabBarView Page View 组件配合使用。 TabBar常用属性

属性名称	类型	描述
滚动	bool如果可能选项卡 List	选项卡选项列表

选项卡常用属性

属性名称	类型	描述
图标
文本	字符串	选项卡文本

TabBarView 常用属性

属性名称	类型	描述控制器❙❙❀❀到controller
child	List	视图组件的子组件是一个列表。一个tab对应一个视图

2.6 Drawer（抽屉组件）

Drawer可以实现类似抽屉缩进和扩展的效果，通常与ListView结合使用。

抽屉常用属性

属性名称	类型	默认值	描述 Widget -	抽屉的子项可以放置任何可见组件
海拔	双	16	阴影大小

Drawer可以添加头部效果：

DrawerHeader：显示基本信息♿U用户名、用户名、用户名、用户Email等信息

DrawerHeader经常使用的属性

属性名称	类型	描述
装饰	装饰

曲线	曲线	如果装饰发生变化，则curve设置的变化曲线和duration设置的动画时间为用于创建出现在头部的动画效果
child	Widget 内容控件 padding	EdgeInsetsGeometry	标题中内容控件的填充值。如果子级为 null，则该值为 null。	类型	描述
Marg	边缘插入几何	围绕标题
装饰	装饰当前用户当前用户名
帐户电子邮件	小组件	当前用户的电子邮件
onDetailsPressed	VoidCallback	点击账户名或账户邮箱时触发的回调函数，可用于显示其他附加信息

3。按钮和提示组件

3.1 FloatingActionButton（悬停按钮组件）

FloatingActionButton 对应一个圆形图标按钮，漂浮在内容上方，显示应用程序中的主要操作，类似于 IOS 中的小白点。

FloatingActionButton 公共属性

属性名称

类型

默认值 ❀child - -

工具提示

前景色

-- -

海拔-

高度高度

-上-

形状

-上-

3.2 扁平按钮（扁平按钮组件）扁平按钮是一种 Material Design 扁平按钮，点击时有阴影效果。

3.3 PopupMenuButton（弹出菜单组件）

PopupMenuButton 通常放置在应用程序的右上角，用于指示多种操作，菜单项使用 PopupMenuItem 组件。

PopupMenuButton 公共属性

属性名称	类型	描述
child -
icon	-	-	项目构建器-	-
onSelected	-	-

3.4 SimpleDialog（简单对话框用于设计对话框组件）可以显示多个消息或操作的框。 SimpleDialog 通常必须与 SimpleDialogOption 组件一起使用。

SimpleDialog 公共属性

属性名称	类型	描述子元素
对话框子元素 title	widget	通常是文本控件
contentPadding	EdgeInsetsGeometry
titlePadding	eomtry part-spacing

通常情况下，对话框是通过一个动作来渲染的，比如点击按钮、点击菜单等，因此对话框一般都封装在一个方法中。
另外，这个过程是异步的，需要异步/等待处理。

3.5 AlertDialog（提示对话框组件）

AlertDialog 比 SimpleDialog 对话框更复杂。它不仅有提示内容，还有一些操作按钮，比如确定、取消等。内容部分可以用SingleChildScrollView包裹起来。

AlertDialog 公共属性

属性名称	类型	描述
对话框底部的操作按钮，如确认、取消等通常是即时对话框内容
titlePadding	EdgeInsetsGeometry	TitleSpacing

3.6 SnackBar（轻量级提示组件）出现在屏幕底部的组件。

SnackBar 常用属性

属性名称	类型	默认值 ❀ SnackBarAction -	请求消息中执行的操作，例如用户将取消可以点击操作
动画	动画	-	为组件添加动画效果ttt Widget	- 问题消息内容，通常是文本组件
持续时间	持续时间	4.0秒	动画运行持续时间❀或背景或-	消息面板背景颜色

4.其他组件

4.1 文本字段（文本框组件）

文本字段是用于文本输入的组件。

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

文本字段常用属性

属性名称

类型

描述

maxLength最大长度

maxLines

int

自动更正

bool

是否自动更正是否

自动对焦

bool

是否密码？文本对齐 inputFormatters

List

允许的输入格式 onChanged

VoidChanged

内容更改

onSubscribed

VoidChanged

回调canen bool 是否禁用（卡片组件） 4.2

卡片内容可be 由大多数类型的组件组成，但通常与 ListTitle 一起使用。该卡有一个子项，但它可以是行、列、列表视图、网格视图或其他支持多个子项的小部件。默认情况下，该卡将其大小减小至 0 像素。您可以使用 SizedBox 来限制卡片的大小。

简短通用属性

属性名称	类型	默认值	描述小工具	-	组件的表格元素，任何widget都可以
margin	EdgeInsetsGeometry	-	decoration 和 child 周围的空白区域不属于内容区域 B❝ 是	RoundedRectangleBorder	短阴影效果，默认阴影效果是一个矩形边圆角。弓为 4.0

Cupertino 风格组件

1。概述

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

2。 CupertinoActivityIndicator 组件

IOS 风格的加载指示器。？ 10.0

加载形状的半径

animate

bool

true AlertDialog 类似于Material Design风格的AlertDialog。

常用属性

属性名称	类型	描述
操作♶>获取对话框底部的列表。比如确认、取消等。
标题	Widget	对话框的标题，通常是文本
内容。 CupertinoButton IOS风格按钮。？ -	按钮颜色
disableColor	Color	ThemeData.disabledColor❀禁用onbutton sed	Void回调	-	按钮按下时的回调函数	子Widget	-	按钮子项通常为文本文本，显示按钮的名称启用true

4. Cupertino 导航组件

4.1 CupertinoTabScaffold

Tab 组件，转换 tab 按钮绑定到 tab 视图。

常用属性

属性名称	类型	描述
tabBar❀Bert Tab按钮，通常由图标和文字组成
tabBuilder	IndexedWidgetBuilder	选项卡视图构造函数

4.2 CupertinoTabBar

Tab 按钮，通常由包含图标加文本的 BottomNavigationBarItem 组成。

常用属性

属性名称

类型

描述

项目项目>Bo 选项卡按钮集合

背景颜色

颜色

选项卡按钮背景颜色

activeColor

Color

为按钮选择的前景色

iconSize

doubledoubledoublea 。 3 CupertinoTabView

选项卡视图。

常用属性

属性名称	类型	描述
builder router	Map	选项卡请参阅路由
4.4 CupertinoPageScaffold 页面的基本布局结构。包含内容和导航栏。？导航栏	阻碍PreferredSizeWidget	顶部导航栏按钮。包含左、中、右三个子组件
child	Widget	页面主要内容

4.5 CupertinoNavigationbar❓4.5 CupertinoNavigationbar❓Navigationbar ❝结构。常用属性leading

Widget

导航栏左侧的组件，通常是后退按钮

作者：

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：你敢说小程序开发的六大技巧你哪一个都不会用？下一篇：小程序开发攻略：登录、图片导出、数据统计、工程化、架构、性能优化

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

Flutter 开发进阶之路：Material Design 和 IOS 风格组件

Material Design 风格组件

1.概述

2。应用程序结构和导航组件

2.1 MaterialApp（应用程序组件）

2.1.2 路由处理

2.1.3 自定义主题

2.2 Scaffold（脚手架组件）

2.3 AppBar（应用程序按钮组件）

2.4 BottomNavigatorBar （底部导航栏）是一个底部导航栏，可以轻松地在选项卡之间切换并导航顶级视图。

2.5 TabBar（水平选项卡和显示组件）

2.6 Drawer（抽屉组件）

3。按钮和提示组件

3.1 FloatingActionButton（悬停按钮组件）

3.3 PopupMenuButton（弹出菜单组件）

3.4 SimpleDialog（简单对话框用于设计对话框组件） 可以显示多个消息或操作的框。 SimpleDialog 通常必须与 SimpleDialogOption 组件一起使用。

3.5 AlertDialog（提示对话框组件）

3.6 SnackBar（轻量级提示组件）出现在屏幕底部的组件。

4.其他组件

4.1 文本字段（文本框组件）

Cupertino 风格组件

1。概述

2。 CupertinoActivityIndi​​cator 组件

4. Cupertino 导航组件

4.1 CupertinoTabScaffold

4.2 CupertinoTabBar

4.5 CupertinoNavigationbar❓4.5 CupertinoNavigationbar❓Navigationbar ❝结构。常用属性leading

版权声明

作者文章

3.4 SimpleDialog（简单对话框用于设计对话框组件）可以显示多个消息或操作的框。 SimpleDialog 通常必须与 SimpleDialogOption 组件一起使用。

2。 CupertinoActivityIndicator 组件