Flutter免费视频第三季-布局组件讲解
视频目录在文章最后，你能够跳到最后进行观看html
Flutter第二季学完，你已经能够做一些效果出来了。可是你想为所欲为的进行布局页面效果，仍是感受有些吃力，这个你不要担心，这季教程学完你就能够精通Flutter的布局了，而且在对Flutter的了解上有更深层次的了解。web
这季里我我会讲解水平布局、垂直布局、GridView布局、ListView布局、Container布局......等多种布局形式。bash
你学习这季视频，最好能够先学一下前两季，这样能够保证你学起来更顺畅和容易。贴出前两季的文章路径。app
-
第一季Flutter视频教程地址：jspang.com/post/flutte…less
-
第二季Flutter视频教程地址：jspang.com/post/flutte…jsp
固然，若是你想和你们一块儿学习和讨论，还能够加入专门的Flutter群，咱们一块儿学习。ide
第01节：水平布局Row的使用
Flutter中的row控件就是水平控件，它可让Row里边的子元素进行水平排列。布局
Row控件能够分为灵活排列和非灵活排列两种，这两种模式都须要熟练掌握，等经验丰富后可根据需求进行使用。post
不灵水平布局
从字面上就能够理解到，不灵活就是根据Row子元素的大小，进行布局。若是子元素不足，它会留有空隙，若是子元素超出，它会警告。学习
好比如今咱们要制做三个按钮，并让三个按钮同时在一排。咱们写下了以下代码，但你会发现效果并不理想。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('水平方向布局'),
),
body:new Row(
children: <Widget>[
new RaisedButton(
onPressed: (){
},
color:Colors.redAccent,
child:new Text('红色按钮')
),
new RaisedButton(
onPressed: (){
},
color:Colors.orangeAccent,
child: new Text('黄色按钮'),
),
new RaisedButton(
onPressed: (){
},
color:Colors.pinkAccent,
child:new Text('粉色按钮')
)
],
)
),
);
}
}
复制代码
这时候你会发现的页面已经有了三个按钮，但这三个按钮并无充满一行，而是出现了空隙。这就是不灵活横向排列形成的。它根据子元素的大小来进行排列。若是咱们想实现充满一行的效果，就要使用灵活水平布局了。
灵活水平布局
解决上面有空隙的问题，可使用 Expanded来进行解决，也就是咱们说的灵活布局。咱们在按钮的外边加入Expanded就能够了，代码以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('水平方向布局'),
),
body:new Row(
children: <Widget>[
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.redAccent,
child:new Text('红色按钮')
)),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.orangeAccent,
child: new Text('黄色按钮'),
)
),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.pinkAccent,
child:new Text('粉色按钮')
)
)
],
)
),
);
}
}
复制代码
这时候就能够布满一行了，效果以下图。
灵活和不灵活的混用
若是这时候想让中间的按钮大，而两边的按钮保持真实大小，就能够不灵活和灵活模式进行混用，实现效果。代码和效果以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('水平方向布局'),
),
body:new Row(
children: <Widget>[
new RaisedButton(
onPressed: (){
},
color:Colors.redAccent,
child:new Text('红色按钮')
),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.orangeAccent,
child: new Text('黄色按钮'),
)
),
new RaisedButton(
onPressed: (){
},
color:Colors.pinkAccent,
child:new Text('粉色按钮')
)
],
)
),
);
}
}
复制代码
第02节：垂直布局Column组件
Column组件即垂直布局控件，可以将子组件垂直排列。其实你学会了Row组件就基本掌握了Column组件，里边的大部分属性都同样，咱们仍是以文字为例子，来看看Column布局。
Column基本用法
写一段代码，在column里加入三行文字，而后看一下效果。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向布局'),
),
body:Column(
children: <Widget>[
Text('I am JSPang'),
Text('my website is jspang.com'),
Text('I love coding')
],
)
),
);
}
}
复制代码
这时候你会发现文字是以最长的一段文字居中对齐的，看起来很别扭。那若是想让文字以左边开始对齐，只须要加入一个对齐属性。
左对齐只要在column组件下加入下面的代码，就可让文字左对齐。
crossAxisAlignment: CrossAxisAlignment.start,
复制代码
- CrossAxisAlignment.star：居左对齐。
- CrossAxisAlignment.end：居右对齐。
- CrossAxisAlignment.center：居中对齐。
主轴和副轴的辨识
在设置对齐方式的时候你会发现右mainAxisAlignment属性，意思就是主轴对齐方式，那什么是主轴，什么又是幅轴那。
-
main轴：若是你用column组件，那垂直就是主轴，若是你用Row组件，那水平就是主轴。
-
cross轴：cross轴咱们称为幅轴，是和主轴垂直的方向。好比Row组件，那垂直就是幅轴，Column组件的幅轴就是水平方向的。
主轴和幅轴咱们搞清楚，才能在实际工做中为所欲为的进行布局。
好比如今咱们要把上面的代码，改为垂直方向居中。由于用的是Column组件，因此就是主轴方向，这时候你要用的就是主轴对齐了。
mainAxisAlignment: MainAxisAlignment.center,
复制代码
如今所有的代码以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向布局'),
),
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('I am JSPang'),
Text('my website is jspang.com'),
Text('I love coding')
],
)
),
);
}
}
复制代码
如今的效果如图：
水平方向相对屏幕居中
让文字相对于水平方向居中，咱们如何处理？其实只要加入Center组件就能够轻松解决。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向布局'),
),
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child:Text('I am JSPang')),
Center(child:Text('my website is jspang.com')),
Center(child:Text('I love coding'))
],
)
),
);
}
}
复制代码
Expanded属性的使用
其实在学习水平布局的时候咱们对Expanded有了深入的理解，它就是灵活布局。好比咱们想让中间区域变大，而头部区域和底部根据文字所占空间进行显示。
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child:Text('I am JSPang')),
Expanded(child:Center(child:Text('my website is jspang.com'))),
Center(child:Text('I love coding'))
],
)
复制代码
在Flutter里的布局我的以为是很灵活的，但这就和咱们写Html+CSS是同样的，咱们须要些练习去熟悉它。动手练习一下吧，理论上咱们学会了水平和垂直布局，已经能够布出咱们想要的任何界面了。
第03节：Stack层叠布局
水平布局和垂直布局确实很好用，可是有一种状况是没法完成的，好比放入一个图片，图片上再写一些字或者放入容器，这时候Row和Column就力不从心了。Flutter为这种状况准备了Stack层叠布局，这节就主要学习一下。
好比咱们如今要做的效果以下：
在头像上方再放入一个容器，容器里边写上字，这时候咱们就可使用Stack布局。
层叠布局的 alignment 属性
alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的。（视频中具体演示）
CircleAvatar组件的使用
CircleAvatar这个常常用来做头像的，组件里边有个radius的值能够设置图片的弧度。
如今咱们准备放入一个图像，而后把弧度设置成100，造成一个漂亮的圆形，代码以下：
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
复制代码
效果代码
想布局出这个效果仍是比较容易的，代码以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var stack = new Stack(
alignment: const FractionalOffset(0.5, 0.8),
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.lightBlue,
),
padding: EdgeInsets.all(5.0),
child: new Text('JSPang 技术胖'),
)
],
);
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向布局'),
),
body:Center(child:stack),
),
);
}
}
复制代码
这节咱们先简单的了解一下Stack布局，咱们下节课还会介绍Stack布局的高级用法。
第04节：Stack的Positioned属性
上节课已经学习了Stack组件，而且进行了两个组件的层叠布局，可是若是是超过两个组件的层叠该如何进行定位那?这就是咱们加今天要学的主角Positioned组件了。这个组件也叫作层叠定位组件。
Positioned组件的属性
- bottom: 距离层叠组件下边的距离
- left：距离层叠组件左边的距离
- top：距离层叠组件上边的距离
- right：距离层叠组件右边的距离
- width: 层叠定位组件的宽度
- height: 层叠定位组件的高度
Demo实例
修改上节课的例子，文字不在放入到container组件里，而是直接放入到Positioned里，而且再也不是两个组件，而是三个子组件，咱们先来看要实现的效果。
实现图片中的布局，代码以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var stack = new Stack(
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Positioned(
top:10.0,
left:10.0,
child: new Text('JSPang.com'),
),
new Positioned(
bottom:10.0,
right:10.0,
child: new Text('技术胖'),
)
],
);
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('层叠布局'),
),
body:Center(child:stack),
),
);
}
}
复制代码
是否是觉的有了层叠布局，咱们在Flutter中的布局就更加灵活了那。小伙伴们能够动手实现一个你常见的布局效果。
第05节：卡片组件布局
Flutter还有一种比较比较酷炫的布局方式，我称 它为卡片式布局。这种布局相似ViewList，可是列表会以物理卡片的形态进行展现。
实例开发
好比咱们如今要开发一个相似收获地址的列表，而且列表外部使用一个卡片式布局。
卡片式布局默认是撑满整个外部容器的，若是你想设置卡片的宽高，须要在外部容器就进行制定。制做的效果如图。
代码中使用了一个垂直布局组件Column组件，而后利用了ListTile实现内部列表，这里须要说明的是ListTile不光可使用在ListView组件中，而后容器组件其实均可以使用。代码以下.
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var card = new Card(
child: Column(
children: <Widget>[
ListTile(
title:new Text('吉林省吉林市昌邑区',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('技术胖:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
ListTile(
title:new Text('北京市海淀区中国科技大学',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('胜宏宇:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
ListTile(
title:new Text('河南省濮阳市百姓办公楼',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('JSPang:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
],
),
);
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('卡片布局'),
),
body:Center(child:card),
),
);
}
}
复制代码
加入QQ群一块儿学习
学习讨论QQ群：674639629(千人群)
入群问题：Flutter出自于哪一个公司？
入群答案：google
视频观看地址
第一节视频：www.bilibili.com/video/av358…
第二节视频：www.bilibili.com/video/av358…
第三节视频：www.bilibili.com/video/av358…
- 1. 技术胖Flutter第三季-14布局RowWidget的详细讲解
- 2. 技术胖Flutter第三季-15垂直布局Column组件
- 3. 技术胖Flutter第三季-18布局CardWidget 卡片布局组件
- 4. 技术胖Flutter第三季-17布局PositionedWidget层叠定位组件
- 5. Flutter常用布局组件
- 6. 技术胖Flutter第三季-16Stack层叠布局
- 7. 相对布局（Relativelayout）——Mars Android开发视频之第一季第十三集（重）
- 8. 免费linux视频
- 9. Flutter-BLoC-第三讲
- 10. 【免费直播课】第三期：AppCan基础之界面布局
- 更多相关文章...
- • 免费ARP详解 - TCP/IP教程
- • ASP.NET Web Pages - 页面布局 - ASP.NET 教程
- • JDK13 GA发布：5大特性解读
- • 常用的分布式事务解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 技术胖Flutter第三季-14布局RowWidget的详细讲解
- 2. 技术胖Flutter第三季-15垂直布局Column组件
- 3. 技术胖Flutter第三季-18布局CardWidget 卡片布局组件
- 4. 技术胖Flutter第三季-17布局PositionedWidget层叠定位组件
- 5. Flutter常用布局组件
- 6. 技术胖Flutter第三季-16Stack层叠布局
- 7. 相对布局（Relativelayout）——Mars Android开发视频之第一季第十三集（重）
- 8. 免费linux视频
- 9. Flutter-BLoC-第三讲
- 10. 【免费直播课】第三期：AppCan基础之界面布局