Flutter基础—质感设计

Flutter基础—质感设计,第1张

概述Material Design,中文名:质感设计,是由Google推出的全新设计语言,旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉。从2014年开始,Android到衍生的Android Wear、Auto和TV,Material Design贯穿其中,成为勾通不同平台、设备的灵魂,让用户在不同平台上也有连贯的体验。为了维护这种一致,Google不允许第三方修改Androi

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 {  @overrIDe  Widget 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: '搜索',],body: new Center(        child: new Text('你好,世界!'),floatingActionbutton: new floatingActionbutton(        tooltip: '增加',child: new Icon(Icons.add),);  }}

上面的实例基本上是一个质感设计,比如,应用栏有阴影和标题文本自动继承正确的样式,还添加了一个浮动的 *** 作按钮。

需要注意的是,我们再次将控件作为参数传递给其他控件。Scaffold是实现基本质感设计可视化的布局结构,Scaffold控件使用多种不同的控件作为命名参数,并将每一个布置在Scaffold适当的位置。同样的,Appbar控件让我们传递leading、actions和Title控件。

总结

以上是内存溢出为你收集整理的Flutter基础—质感设计全部内容,希望文章能够帮你解决Flutter基础—质感设计所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1002682.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存