浅谈Flutter UI布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiyei2009/article/details/84203422
1 Flutter布局浅述
In Android, the View is the foundation of everything that shows up on the screen. Buttons, toolbars, and inputs, everything is a View. In Flutter, the rough equivalent to a View is a Widget. Widgets don’t map exactly to Android views, but while you’re getting acquainted with how Flutter works you can think of them as “the way you declare and construct UI”.
与Android不同的是，Flutter提供的widget是在是太多了，对于相同的UI界面也可以使用不同的widget来实现，不过在Flutter中有一个原则，那就是尽量使用轻量级的widget来实现
2 布局拆分
第一步是将布局拆分成基本的元素：
找出行和列.
布局包含网格吗?
有重叠的元素吗?
是否需要选项卡?
注意需要对齐、填充和边框的区域.
首先，确定更大的元素。在这个例子中，四个元素排列成一列：一个图像，两个行和一个文本块
其实这个和Android中的布局类似，如上的布局，在Android中我们也会采用一个线性布局,child分别是imageview,线性布局 线性布局 TextView。
3 确定根布局
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(title: "Flutter Layout Demo",home: Scaffold(appBar: AppBar(centerTitle: true,title: Text("Flutter Layout Demo"),),body: ,),);}
}
下面开始布局body部分了，body部分我们可以采用一个Column或者ListView,官方是ListView 可能主要是怕屏幕空间不够吧。
4 布局Image
body: ListView(children: <Widget>[Image.asset("assets/images/lake.jpg",height: 240.0,fit: BoxFit.cover,),],),
这里首先把lake.jpg拷贝到工程的assets/images目录下，并且在pubspec.yaml 文件中修改如下
assets:- assets/images/lake.jpg
5 布局标题行
Widget titleSection = Container(padding: EdgeInsets.all(32.0),child: Row(//3个child 水平排列children: <Widget>[//占满剩余空间Expanded(// 2 个child竖直排列child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Container(padding: EdgeInsets.only(bottom: 8.0),child: Text("Oeschinen Lake Campground",style: TextStyle(fontWeight: FontWeight.bold),),),Text("Kandersteg, Switzerland",style: TextStyle(color: Colors.grey[500]),)],),),Icon(Icons.star,color: Colors.red[500],),Text("41"),],),);
// TODO: implement buildreturn MaterialApp(title: "Flutter Layout Demo",theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(centerTitle: true,title: Text("Flutter Layout Demo"),),body: ListView(children: <Widget>[Image.asset("assets/images/lake.jpg",height: 240.0,fit: BoxFit.cover,),titleSection,],),),);
6 实现Button布局
对于Button布局，可以看出这首先是一个Row布局，然后有三个child
/// 构建buttonColumn _buildButtonColumn(BuildContext context, IconData icon, String label) {Color color = Theme.of(context).primaryColor;return Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,//列布局children: <Widget>[Icon(icon,color: color,),Container(margin: EdgeInsets.only(top: 8.0),child: Text(label,style: TextStyle(fontSize: 12.0,fontWeight: FontWeight.w400,color: color,),),)],);}
Widget buttonSection = Container(child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[_buildButtonColumn(context, Icons.call, "Call"),_buildButtonColumn(context, Icons.near_me, "Route"),_buildButtonColumn(context, Icons.share, "Share"),],),);
7 布局Text文本
关于Text文本的布局就很简单了，这里不再细说了，可以参考官方例子。下面看一下完成后的例子
代码
void main() => runApp(MyApp());class MyApp extends StatelessWidget {var text = '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.''';@overrideWidget build(BuildContext context) {Widget titleSection = Container(padding: EdgeInsets.all(32.0),child: Row(//3个child 水平排列children: <Widget>[//占满剩余空间Expanded(// 2 个child竖直排列child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Container(padding: EdgeInsets.only(bottom: 8.0),child: Text("Oeschinen Lake Campground",style: TextStyle(fontWeight: FontWeight.bold),),),Text("Kandersteg, Switzerland",style: TextStyle(color: Colors.grey[500]),)],),),Icon(Icons.star,color: Colors.red[500],),Text("41"),],),);Widget buttonSection = Container(child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[_buildButtonColumn(context, Icons.call, "Call"),_buildButtonColumn(context, Icons.near_me, "Route"),_buildButtonColumn(context, Icons.share, "Share"),],),);Widget textSection = Container(padding: EdgeInsets.all(32.0),child: Text(text,softWrap: true,),);// TODO: implement buildreturn MaterialApp(title: "Flutter Layout Demo",theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(centerTitle: true,title: Text("Flutter Layout Demo"),),body: ListView(children: <Widget>[Image.asset("assets/images/lake.jpg",height: 240.0,fit: BoxFit.cover,),titleSection,buttonSection,textSection,],),),);}/// 构建buttonColumn _buildButtonColumn(BuildContext context, IconData icon, String label) {Color color = Theme.of(context).primaryColor;return Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,//列布局children: <Widget>[Icon(icon,color: color,),Container(margin: EdgeInsets.only(top: 8.0),child: Text(label,style: TextStyle(fontSize: 12.0,fontWeight: FontWeight.w400,color: color,),),)],);}
}
8 Flutter布局总结
参考 https://flutter.io/docs/development/ui/layout
浅谈Flutter UI布局相关推荐
- 浅谈Flutter的状态State
重要消息 网易云[玩转大前端]配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 一行代代码置灰应用?对就是这么干 本方主要内容为 聊一聊 Widget .谈一谈 Context .说一 ...
- 浅谈Flutter跨平台调用方式MethodChannel
Flutter是目前非常流行的跨平台方案,由于它的性能接近于原生应用,因而被越来越多的开发者所采用.既然是跨平台方案,那么久必然存在调用系统功能的需求,在Flutter中,Flutter层与nativ ...
- 浅谈车载UI与手机UI的设计区别【萧蕊冰】
今天的文章来讲一下车载UI与手机UI的设计区别.车载UI也就是汽车UI,现在很多企业在开发产品时,把产品硬件配置提升得很高,几乎与手机同步,所以很多人就会觉得车载UI就跟手机UI没什么区别,其实,这是 ...
- 浅谈flutter的优点与缺点
Google不喜欢MPEG,于是推出了VP8.但打一开始他们就没在将其打造成一个真正的开放标准上做任何努力. Google不喜欢HTTP,于是推出了SPDY.但现在只有Chrome和Google的网页 ...
- 浅谈Android五大布局——LinearLayout、FrameLayout和AbsoulteLa
为什么80%的码农都做不了架构师?>>> Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了 ...
- java设置绝对布局_浅谈Java绝对布局 原创
在 swing 中,除了使用布局管理器之外还可以使用绝对布局.下面我们就来简单了解一下什么是绝对布局. 绝对布局,就是硬性指定组件在容器中的位置和大小,可以使用绝对坐标的方式来指定组件的位置. 使用绝 ...
- 浅谈Android五大布局
来自:http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html Android的界面是有布局和组件协同完成的,布局好比是建 ...
- 浅谈Android五大布局（一）——LinearLayout、FrameLayout和AbsoulteLayout
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLay ...
- 浅谈从UI设计转前端的坎坷历程
大家好,我是一个程序员--资深CV工程师(狗头保命)!在此想和大家一起分享一下从UI转前端的坎坷历程,希望能够帮助一些想入坑的朋友们. 加入门派(如何走上UI设计之路) 我大学的专业是计算机科学与技术 ...
最新文章
- 数据回发时，维护ASP.NET Tree控件位置
- WindowsMobile/Win Form-界面自适应
- boost::fusion::detail::and_用法的测试
- 悟空分词与mysql结合_Mysql联合查询UNION和UNION ALL的使用介绍
- 【算法竞赛学习】气象海洋预测-Task5 模型建立之 SA-ConvLSTM
- 用户需求、己、竞争对手的关系
- 【2016年第4期】经济发展的顶层设计 企业战略的终极蓝图—— 产业互联网
- oppo手机显示andrOid什么意思,OPPO R17 Pro手机状态栏图标分别代表什么意思?
- php 付款,php – 接受付款最佳做法
- TypeScript算法专题 - blog1.基于TypeScript语言的单链表实现
- 网络热词下的民意传播
- IoT平台功能架构图
- win10环境redis集群搭建（非主从模式）
- 计算机的算数逻辑单元控制单元统称为,算术控制单元
- 美团买菜助手来了，自动点击，助你买菜
- SpringMVC总结笔记
- 杂谈:Perl6 树莓Pi Erlang win10 Clojure
- RGB565 RGB888
- 公司上云在即，给大家分享一份猫厂、鹅厂和菊厂云服务器的测评情况
- 通过FAR计算fRR