Flutter免費視頻第二季-經常使用組件講解
視頻在文章的最後，能夠直接跳到最後看視頻。html
這一季將集中火力，死磕Flutter的API，也就是組件（widget）的使用，咱們儘可能把經常使用的都講到，這也算學習中最辛苦的一章，由於你要記憶的內容會不少。可是學完後，會頗有成就感。（但學習這一季，你必須先把第一季看了，不然沒有開發環境是沒辦法繼續學習的。）前端
經過第一季的學習，你必定已經安裝好了Flutter開發環境，這篇文章咱們將講解Flutter的基本組建，我會把最經常使用的屬性都進行講解，但並不必定徹底，目的是使用最少的時間快速上手Flutter。vue
第01節：Text Widget 文本組件的使用
在開始學習Text組件前，咱們再來複習一遍最基本的代碼編寫，確定有些小夥伴已經忘記了。咱們來快速寫一個HelloWorld程序出來。程序員
在寫的時候，你要一直念一個咒語，這樣對之後的學習會頗有幫助，咒語就是:"Flutter一切皆組件！"有了這個印象後，咱們剩下的課程就好學了。typescript
看一下最基礎的HelloWold代碼。數組
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Text('Hello JSPang')
),
),
);
}
}
複製代碼
這裏咱們已經使用了一個最簡單的Text組件了，可是咱們全部屬性都是默認的的，下面咱們就來多一點修飾這個Text組件。bash
TextAlign屬性
TextAlign屬性就是文本的對齊方式，它的屬性值有以下幾個（詳細請看視頻中講解）：網絡
- center: 文本以居中形式對齊,這個也算比較經常使用的了。
- left:左對齊，常用，讓文本居左進行對齊，效果和start同樣。
- right :右對齊，使用頻率也不算高。
- start:以開始位置進行對齊，相似於左對齊。
- end: 覺得本結尾處進行對齊，不經常使用。有點相似右對齊.
總結起來，也就算三個對齊方式，left(左對齊)、center（居中對齊）、right（右對齊）。咱們來看一下具體代碼：app
child:Text(
'Hello JSPang ,很是喜歡前端，而且願意爲此奮鬥一輩子。我但願能夠出1000集免費教程。',
textAlign:TextAlign.left,
)
複製代碼
maxLines屬性
設置最多顯示的行數，好比咱們如今只顯示1行，相似一個新聞列表的題目。代碼以下：less
child:Text(
'Hello JSPang ,很是喜歡前端，而且願意爲此奮鬥一輩子。我但願能夠出1000集免費教程。',
textAlign:TextAlign.left,
maxLines: 1,
)
複製代碼
設置好後，文字只能顯示出1行了。
overflow屬性
overflow屬性是用來設置文本溢出時，如何處理,它有下面幾個經常使用的值供咱們選擇。
- clip：直接切斷，剩下的文字就沒有了，感受不太友好，體驗性很差。
- ellipsis:在後邊顯示省略號，體驗性較好，這個在工做中常用。
- fade: 溢出的部分會進行一個漸變消失的效果，固然是上線的漸變，不是左右的哦。
style屬性
style屬性的內容比較多，具體的你能夠查一下API，我這裏帶做一個效果，方便你們快速學會Style的用法。
咱們下面要做的效果爲，字體大小爲25.0,顏色爲粉紅色,而且有一個下劃線。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Text(
'Hello JSPang ,很是喜歡前端，而且願意爲此奮鬥一輩子。我但願能夠出1000集免費教程。',
textAlign:TextAlign.left,
overflow:TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize:25.0,
color:Color.fromARGB(255, 255, 150, 150),
decoration:TextDecoration.underline,
decorationStyle:TextDecorationStyle.solid,
),
)
),
),
);
}
}
複製代碼
更詳細的屬性資料能夠參看這個網址：docs.flutter.io/flutter/pai…
其實程序員最重要的一個能力就是查看文檔的能力，我這裏也只是講些最常使用的，在實際工做中，仍是要多查穩定。
第02節：Container容器組件的使用1
Container（容器控件）在Flutter是常用的控件，它就至關於咱們HTML裏的<div>標籤，每一個頁面或者說每一個視圖都離不開它。那這節課咱們就來學習一下。
補充：在VSCode中方便打開虛擬機
不少小夥伴給我發私信說，本身寫個批處理文件太麻煩了。能不能在VSCode裏就直接打開那？固然是能夠的，這個也是羣友蒙星教個人。（感謝你的指導，讓我學會了新的技能）
在安裝了Flutter和Dart插件之後，在VSCode的右下角顯示No Devices,咱們直接點擊它，就會顯示咱們電腦中安裝的虛擬機，若是你電腦上沒有，也能夠進行安裝。（詳細開視頻中如何進行配置）
Alignment屬性
其實容器的做用就是方便咱們進行佈局的，Flutter這點也做的很好，咱們先來看容器屬性中的Alignment。
這個屬性針對的是Container內child的對齊方式，也就是容器子內容的對齊方式，並非容器自己的對齊方式。
先做一個效果：創建一個容器，而後容器內加入一段文字Hello JSPang, 並讓它居中對齊。
具體代碼以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.center,
),
),
),
);
}
}
複製代碼
這時候能夠看見，咱們的文本已經居中顯示在手機屏幕上了。固然它的對齊方式還有以下幾種：
bottomCenter:下部居中對齊。botomLeft: 下部左對齊。bottomRight：下部右對齊。center：縱橫雙向居中對齊。centerLeft：縱向居中橫向居左對齊。centerRight：縱向居中橫向居右對齊。topLeft：頂部左側對齊。topCenter：頂部居中對齊。topRight： 頂部居左對齊。
設置寬、高和顏色屬性
設置寬、高和顏色屬性是相對容易的，只要在屬性名稱後面加入浮點型數字就能夠了，好比要設置寬是500，高是400，顏色爲亮藍色。代碼以下：
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.center,
width:500.0,
height:400.0,
color: Colors.lightBlue,
),
複製代碼
實現的效果如圖所示：
這節課仍是比較簡單的，下節課須要繼續學習Conatainer中padding和margin屬性。
第03節：Container容器組件的使用2
上節已經簡單的學習了一下Container容器組件的用法，這節咱們繼續學習，主要講解一下的padding,margin和decoration這幾個屬性。咱們先來看看Padding屬性。
padding屬性
padding的屬性就是一個內邊距，它和你使用的前端技術CSS裏的padding表現形式同樣，指的是Container邊緣和child內容的距離。先來看一個內邊距爲10的例子。具體代碼以下(咱們仍是接着上節課的代碼來寫)：
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
color: Colors.lightBlue,
padding:const EdgeInsets.all(10.0),
),
複製代碼
上面主要的padding代碼就一句。
padding:const EdgeInsets.all(10.0),
複製代碼
這句的意思是設置Container的內邊距是10，左右上下所有爲10，這看起來很是容易。那咱們再加大一點難度。若是上邊距爲30，左邊距爲10，這時候EdgeInsets.all()就知足不了咱們了。
** EdgeInsets.fromLTRB(value1,value2,value3,value4)**
咱們用EdgeInsets.fromLTRB(value1,value2,value3,value4) 能夠知足咱們的需求，LTRB分別表明左、上、右、下。
那咱們設置上邊距爲30，左邊距爲10，就能夠用下面的代碼來編寫。
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
複製代碼
這時候咱們的結果就變成了下圖。
有了這兩個屬性，基本就能夠知足咱們的工做須要了。
margin屬性
會了padding屬性的設置，margin就變的很是容易了，由於方法基本上同樣。不過margin是外邊距，只的是container和外部元素的距離。
如今要把container的外邊距設置爲10個單位，代碼以下:
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
color: Colors.lightBlue,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
),
複製代碼
圖中能夠看出，已經有了明顯的外邊距。
固然你也能夠分別設置不一樣的外邊距，方法也是使用fromLTRB，我在視頻中演示，這裏就不累述了。
decoration屬性
decoration是 container 的修飾器，主要的功能是設置背景和邊框。
好比你須要給背景加入一個漸變，這時候須要使用BoxDecoration這個類，代碼以下（須要注意的是若是你設置了decoration，就不要再設置color屬性了，由於這樣會衝突）。
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
)
),
),
複製代碼
上面的代碼去掉了color的設置，這時候container的背景就變成了漸變顏色，以下圖。
設置邊框
設置邊框能夠在decoration裏設置border屬性，好比你如今要設置一個紅色邊框，寬度爲2。代碼以下：
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border:Border.all(width:2.0,color:Colors.red)
),
),
複製代碼
關鍵代碼其實就是：
border:Border.all(width:2.0,color:Colors.red)
複製代碼
這時候就有了邊框顯示，我就不給你們上圖片了，若是有須要視頻中查看吧。
這節課就到這裏，但願小夥伴們都能動手練習起來。在這裏附上所有代碼，方便小夥伴們學習。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border:Border.all(width:2.0,color:Colors.red)
),
),
),
),
);
}
}
複製代碼
第04節：Image圖片組件的使用
咱們都但願本身做的程序賞心悅目，俗話說的好一圖頂千言，因此圖片的運用在程序製做裏相當重要。這節課咱們就來看一下圖片組件的使用。
加入圖片的幾種方式
- Image.asset:加載資源圖片，就是加載項目資源目錄中的圖片,加入圖片後會增大打包的包體體積，用的是相對路徑。
- Image.network:網絡資源圖片，意思就是你須要加入一段http://xxxx.xxx的這樣的網絡路徑地址。
- Image.file:加載本地圖片，就是加載本地文件中的圖片，這個是一個絕對路徑，跟包體無關。
- Image.memory: 加載Uint8List資源圖片,這個我目前用的不是不少，因此沒什麼發言權。
咱們如今就以加入網絡圖片爲例子，在Container里加入一張圖片，代碼以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
child:new Image.network(
'http://jspang.com/static/myimg/blogtouxiang.jpg',
scale:1.0,
),
width:300.0,
height:200.0,
color: Colors.lightBlue,
),
),
),
);
}
}
複製代碼
這時候就能夠看到圖片被加入進來了，固然咱們還順便設置了容器的寬和高。
fit屬性的設置
fit屬性能夠控制圖片的拉伸和擠壓，這些都是根據圖片的父級容器來的，咱們先來看看這些屬性（建議此部分組好看視頻理解）。
-
BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。
-
BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。
-
BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。
-
BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。
-
BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。
-
BoxFit.scaleDown：效果和contain差很少，可是此屬性不容許顯示超過源圖片大小，可小不可大。
這部分我會在視頻中充分演示，每個效果都會做對應的演示，建議收看視頻進行理解。
圖片的混合模式
圖片混合模式（colorBlendMode）和color屬性配合使用，能讓圖片改變顏色，裏邊的模式很是的多，產生的效果也是很是豐富的。在這裏做幾個簡單的例子，讓你們看一下效果，剩下的留給小夥伴本身探索。
child:new Image.network(
'http://jspang.com/static/myimg/blogtouxiang.jpg',
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,
),
複製代碼
- color：是要混合的顏色，若是你只設置color是沒有意義的。
- colorBlendMode:是混合模式，至關於咱們如何混合。
repeat圖片重複
-
ImageRepeat.repeat : 橫向和縱向都進行重複，直到鋪滿整個畫布。
-
ImageRepeat.repeatX: 橫向重複，縱向不重複。
-
ImageRepeat.repeatY：縱向重複，橫向不重複。
來個所有重複的代碼。
child:new Image.network(
'http://jspang.com/static/myimg/blogtouxiang.jpg',
repeat: ImageRepeat.repeat,
),
複製代碼
圖片的使用在程序中我覺的是很是有意思的，也能製做出不少酷炫的效果，你能夠把你做出的效果給我留言哦。下節課見了。
第05節：ListView 列表組件簡介
列表組件的知識實際上是不少的，也是一個常用的組件，咱們這裏先做一個簡介，讓你們有個直觀的感覺，先敲開大門，你們就好深刻了。這節咱們先學習最簡單的列表組件如何製做。
ListView的聲明
學習不只要學，還要不斷的練習，這節咱們從新熟悉一下一個Flutter頁面的基本寫法，由於前面已經學過，因此我相信不少小夥伴已經都會了，可是我麼年主要是練習，代碼以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title:'JSPang Flutter Demo',
home:Scaffold(
appBar:new AppBar(
title:new Text('ListView Widget')
),
body: new Text('ListView Text')
),
);
}
}
複製代碼
這就是一個最基本的機構，具體解釋和寫法看視頻吧。
有了最基本的結構後，就能夠加入ListView組件，在body代碼處加入下面的代碼：
body: new ListView(
children:<Widget>[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
)
]
),
複製代碼
咱們使用了ListView，而後在他的內部children中，使用了widget數組，由於是一個列表，因此它接受一個數組，而後有使用了listTite組件（列表瓦片），在組件中放置了圖標和文字。
固然咱們還能夠多加入幾行列表，好比咱們再加入一行，代碼以下。
body: new ListView(
children:<Widget>[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
),
new ListTile(
leading:new Icon(Icons.account_balance),
title:new Text('account_balance')
),
]
),
複製代碼
這時候已經有兩行列表了（具體效果視頻中查看）。
圖片列表的使用
上節課學習了Image Widget，在這裏咱們就在列表中加入圖片來試一下。咱們插入4幅圖片，而後看一下效果，代碼以下：
body: new ListView(
children:<Widget>[
new Image.network(
'http://jspang.com/static/upload/20181111/G-wj-ZQuocWlYOHM6MT2Hbh5.jpg'
),
new Image.network(
'http://jspang.com/static/upload/20181109/1bHNoNGpZjyriCNcvqdKo3s6.jpg'
),
new Image.network(
'http://jspang.com/static/myimg/typescript_banner.jpg'
),new Image.network(
'http://jspang.com/static/myimg/smile-vue.jpg'
)
]
),
複製代碼
咱們使用了網絡的方式，插入了4張圖片，而且這4張圖片造成了一個列表。小夥伴們快動手試一試吧。
第06節：橫向列表的使用
已經對ListView有了清楚的認識，也作出了普通的縱向（豎向列表）。這節課咱們看看橫向列表如何使用。其實仍是使用咱們的ListView組件，只是在ListView組件里加一個ScrollDirection屬性。
製做橫向列表
這個咱們先來看效果，而後再具體講解使用方法:
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
height:200.0,
child:new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width:180.0,
color: Colors.lightBlue,
), new Container(
width:180.0,
color: Colors.amber,
), new Container(
width:180.0,
color: Colors.deepOrange,
),new Container(
width:180.0,
color: Colors.deepPurpleAccent,
),
],
)
),
),
),
);
}
}
複製代碼
咱們先是加入了Center組件，做用是讓咱們的橫向列表能夠居中到屏幕的中間位置，而後在center組件的下面加入了Container容器組件，並設置了容器組件的高是200，在容器組件裏咱們加入了ListView組件，而後設置了組件的scrollDirection屬性。而後再ListView的子組件里加入了Container容器組件，而後設置了不一樣顏色，效果如圖。
scrollDirection屬性
ListView組件的scrollDirection屬性只有兩個值，一個是橫向滾動，一個是縱向滾動。默認的就是垂直滾動，因此若是是垂直滾動，咱們通常都不進行設置。
- Axis.horizontal:橫向滾動或者叫水平方向滾動。
- Axis.vertical:縱向滾動或者叫垂直方向滾動。
優化代碼簡介
學到這裏，我相信不少小夥伴必定內心不少草泥馬在崩騰了，Flutter太反人類了，全是嵌套，讓咱們如何維護。其實這不能怪Flutter，這是我爲了教學簡單，因此沒有把組件分開定義。
如今把列表組件獨立定義成一個類，而後咱們再加入到主組件中。再工做中會把組件分的很細，這樣既能很好的複用有便於維護，還有利於分工，我我的是很是喜歡Flutter這種萬物皆組件的形式的。
咱們聲明一個MyList的類，而後把嵌套的代碼放到這個類裏,代碼以下。
class MyList extends StatelessWidget{
@override
Widget build(BuildContext context){
return ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width:180.0,
color: Colors.lightBlue,
), new Container(
width:180.0,
color: Colors.amber,
), new Container(
width:180.0,
color: Colors.deepOrange,
),new Container(
width:180.0,
color: Colors.deepPurpleAccent,
),
],
);
}
}
複製代碼
而後再MyAPP類裏直接使用這個類，這樣就減小了嵌套。所有代碼以下，詳細的講解看視頻吧。
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(
body:Center(
child:Container(
height:200.0,
child:MyList()
),
),
),
);
}
}
class MyList extends StatelessWidget{
@override
Widget build(BuildContext context){
return ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width:180.0,
color: Colors.lightBlue,
), new Container(
width:180.0,
color: Colors.amber,
), new Container(
width:180.0,
color: Colors.deepOrange,
),new Container(
width:180.0,
color: Colors.deepPurpleAccent,
),
],
);
}
}
複製代碼
這節課就到這裏了，主要就是學一下橫向列表如何製做和如何減小嵌套。但願小夥伴們都能有所收穫。下節課見了。
第07節：動態列表的使用
有經驗的程序員都知道，其實咱們在實際開發中，這種寫死的，或者叫靜態的列表使用的很是少。咱們經常使用的是動態列表，好比咱們的數據從後臺讀取過來，而後存入一個變量數組裏，而後以數組的內容循環出一個列表。
再直觀的講，好比咱們訪問淘寶的頁面，這時候數據是動態的，這樣的列表如何實現,這節課就學習一下。
List類型的使用
List是Dart的集合類型之一,其實你能夠把它簡單理解爲數組（反正我是這麼認爲的），其餘語言也都有這個類型。它的聲明有幾種方式：
var myList = List(): 非固定長度的聲明。var myList = List(2): 固定長度的聲明。var myList= List<String>():固定類型的聲明方式。var myList = [1,2,3]: 對List直接賦值。
那咱們這裏使用的是一個List傳遞，而後直接用List中的generate方法進行生產List裏的元素。最後的結果是生產了一個帶值的List變量。代碼以下：
void main () => runApp(MyApp(
items: new List<String>.generate(1000, (i)=> "Item $i")
));
複製代碼
說明:再main函數的runApp中調用了MyApp類，再使用類的使用傳遞了一個items參數,並使用generate生成器對items進行賦值。
generate方法傳遞兩個參數，第一個參數是生成的個數，第二個是方法。
接受參數
咱們已經傳遞了參數，那MyApp這個類是須要接收的。
final List<String> items;
MyApp({Key key, @required this.items}):super(key:key);
複製代碼
這是一個構造函數，除了Key，咱們增長了一個必傳參數，這裏的@required意思就必傳。:super若是父類沒有無名無參數的默認構造函數，則子類必須手動調用一個父類構造函數。
這樣咱們就能夠接收一個傳遞過來的參數了，固然咱們要事先進行聲明。
動態列表 ListView.builder()
接受了值以後，就能夠直接調用動態列表進行生成了。具體代碼以下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp(
items: new List<String>.generate(1000, (i)=> "Item $i")
));
class MyApp extends StatelessWidget{
final List<String> items;
MyApp({Key key, @required this.items}):super(key:key);
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:new ListView.builder(
itemCount:items.length,
itemBuilder:(context,index){
return new ListTile(
title:new Text('${items[index]}'),
);
}
)
),
);
}
}
複製代碼
如今咱們能夠啓動虛擬機來查看，咱們的列表的效果了。這個就是工做中咱們常使用的列表的方式，固然咱們也能夠從新作一個列表類，把組件做的美美的。
小夥伴能夠試着來做一個帶圖文的新聞列表。
第08節：GridView網格列表組件
列表組件已經學會了，那還有一種經常使用的列表，叫作網格列表。網格列表常常用來顯示多張圖片，好比咱們常用的手機裏的相冊功能，大部分形式都是網格列表。
簡單例子演示
咱們先不作一個相冊的應用，而是使用文字，做一個最簡單的網格列表，目的是先熟悉一下GridView的基本語法，代碼以下，視頻中會進行詳細講解：
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(
body:GridView.count(
padding:const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 3,
children: <Widget>[
const Text('I am Jspang'),
const Text('I love Web'),
const Text('jspang.com'),
const Text('我喜歡玩遊戲'),
const Text('我喜歡看書'),
const Text('我喜歡吃火鍋')
],
)
),
);
}
}
複製代碼
咱們在body屬性中加入了網格組件，而後給了一些經常使用屬性:
- padding:表示內邊距，這個小夥伴們應該很熟悉。
- crossAxisSpacing:網格間的空當，至關於每一個網格之間的間距。
- crossAxisCount:網格的列數，至關於一行放置的網格數量。
圖片網格列表
加入文字做網格列表老是怪怪的，也不是很直觀，咱們利用圖片來做一些網格列表。固然咱們用一種更原生的方法，如今官方已經不鼓勵使用這種方法了，可是爲了你碰到時，不至於不知道怎麼回事，因此咱們做一下這種形式，但主要是爲了做圖片佈局。
代碼以下：
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(
body:GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
childAspectRatio: 0.7
),
children: <Widget>[
new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
],
)
),
);
}
}
複製代碼
- childAspectRatio:寬高比，這個值的意思是寬是高的多少倍，若是寬是高的2倍，那咱們就寫2.0，若是高是寬的2倍，咱們就寫0.5。但願小夥伴們理解一下。
這節課就到這裏，但願小夥伴們有所收穫，做一個本身喜歡的圖片集出來。
視頻鏈接地址
共14集：www.bilibili.com/video/av358…
學習討論QQ羣：674639629(千人羣)
入羣問題：Flutter出自於哪一個公司？
入羣答案：google
- 1. 二、Flutter經常使用組件-Text文本組件
- 2. Flutter常用組件（二）：Container
- 3. Flutter經常使用Widget詳解（二）
- 4. 免費linux視頻
- 5. flutter常見組件之Button(第二期)
- 6. flutter 經常使用插件
- 7. flutter經常使用組件API(第三期)
- 8. Delphi視頻教程第二季
- 9. 三、Flutter經常使用組件-Container容器組件
- 10. 四、Flutter經常使用組件-ListView 列表組件
- 更多相關文章...
- • 免費ARP詳解 - TCP/IP教程
- • 二級緩存的併發訪問策略和常用插件 - Hibernate教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）