Flutter基础—质感设计
Material Design,中文名:质感设计,是由Google推出的全新设计语言,旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉。从2014年开始,Android到衍生的Android Wear、Auto和TV,Material Design贯穿其中,成为勾通不同平台、设备的灵魂,让用户在不同平台上也有连贯的体验。为了维护这种一致,Google不允许第三方修改Android Wear、Auto和TV的界面以及交互。
Flutter提供了一些控件,帮助你构建遵循质感设计(Material Design)的应用程序。一个质感设计的应用程序从MaterialApp控件开始,它在应用程序根目录下建立许多常用的控件,包括Navigator,通过字符串标识来管理堆叠的界面,也称为routes。Navigator让应用程序各个界面之间平滑地过渡。不一定要使用MaterialApp控件,但它使用起来很方便实用。
import 'package:flutter/material.dart';
void main() {runApp(new MaterialApp(title: 'Flutter教程',home: new TutorialHome(),));
}
class TutorialHome extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(leading: new IconButton(icon: new Icon(Icons.menu),tooltip: '导航菜单',onPressed: null,),title: new Text('实例标题'),actions: <Widget>[new IconButton(icon: new Icon(Icons.search),tooltip: '搜索',onPressed: null,),],),body: new Center(child: new Text('你好,世界!'),),floatingActionButton: new FloatingActionButton(tooltip: '增加',child: new Icon(Icons.add),onPressed: null,),);}
}
上面的实例基本上是一个质感设计,比如,应用栏有阴影和标题文本自动继承正确的样式,还添加了一个浮动的操作按钮。
需要注意的是,我们再次将控件作为参数传递给其他控件。Scaffold是实现基本质感设计可视化的布局结构,Scaffold控件使用多种不同的控件作为命名参数,并将每一个布置在Scaffold适当的位置。同样的,AppBar控件让我们传递leading、actions和title控件。
Flutter基础—质感设计相关推荐
- Flutter进阶—质感设计之直接输入
Input控件是质感设计的文本输入控件,它在用户每次输入时都会调用onChanged回调时,都会更新字段值,还可以实时的对用户输入进行响应. import 'package:flutter/mater ...
- Flutter进阶—质感设计之模态底部面板
模态底部面板是菜单或对话框的替代方案,可防止用户与其他控件进行互动,可以使用showModalBottomSheet函数创建和显示模态底部面板. import 'package:flutter/mat ...
- Flutter进阶—质感设计之持久底部面板
持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板.可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板. ...
- Flutter进阶—质感设计之卡片
Card控件是质感设计中的卡片控件,作为详细信息的入口.卡片有圆角和阴影,卡片是用于表示一些相关信息的面板,例如相册,地理位置,餐食,联系细节等. import 'package:flutter/ma ...
- Flutter进阶—质感设计之标签栏
在质感设计的控件中,有一个显示水平的一行选项卡,通常作为AppBar控件的一部分创建,并与TabBarView控件结合使用. import 'package:flutter/material.dart ...
- Flutter进阶—质感设计之进度条
LinearProgressIndicator控件是质感设计中的线性进度指示器. import 'package:flutter/material.dart'; class ActionViewEco ...
- Flutter进阶—质感设计之表单输入
FormField控件是单一表单字段,这个控件维护表单字段的当前状态,以便更新和验证错误能在UI中可见.TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解),Fo ...
- Flutter进阶—质感设计之列表项
创建achievement_view_list_item.dart文件,具体的实现每一个列表项. import 'package:flutter/material.dart'; // 创建类,成就目标 ...
- Flutter进阶—质感设计之弹出菜单
PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单. import 'package:flutter/material.dart'; class MenusDemo extends ...
最新文章
- MySQL Sending data导致查询很慢的问题详细分析
- H3C ISIS与BGP 路由配置
- 【PC工具】离线地图图片地图瓦片下载神器map-download地图下载器
- 八 python 环境安装
- 一个历时五天的 Bug
- 两篇很牛的vim使用技巧
- 前端面试---Vue部分考点梳理
- 简述垃圾对象产生_使用零垃圾创建数百万个对象
- Python学习秘籍 这些窍门就连老司机都不一定知道 值得学习
- 【codevs1040】【01NOIPTG】统计单词个数,字符串的划分DP
- asp.net身份认证
- 【Computer Organization笔记17】大实验讨论:各组数据通路展示
- Python实现对给定的列表中连续数字的寻找
- LimeSDR官方系列教程(三):一个实际测试例子
- Halcon 第四章『图像特征和提取』◆第3节:基于图像的纹理特征|灰度共生矩阵
- Notification和NotificationManagerService原理解析
- ASMEDIA祥硕 PCIe与SATA控制芯片
- 快讯:今日一颗小行星2014 RC掠过地球轨道
- DBUtils 的使用与踩坑记录
- 小程序多用户抽奖助手开发总结