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基礎之界面佈局