Flutter免費視訊第二季-常用元件講解

技術胖發表於2018-11-26
Flutter元件

視訊在文章的最後，可以直接跳到最後看視訊。

這一季將集中火力，死磕Flutter的API，也就是元件（widget）的使用，我們儘量把常用的都講到，這也算學習中最辛苦的一章，因為你要記憶的內容會很多。但是學完後，會很有成就感。（但學習這一季，你必須先把第一季看了，否則沒有開發環境是沒辦法繼續學習的。）

通過第一季的學習，你一定已經安裝好了Flutter開發環境，這篇文章我們將講解Flutter的基本組建，我會把最常用的屬性都進行講解，但並不一定完全，目的是使用最少的時間快速上手Flutter。

第01節：Text Widget 文字元件的使用

在開始學習Text元件前，我們再來複習一遍最基本的程式碼編寫，肯定有些小夥伴已經忘記了。我們來快速寫一個HelloWorld程式出來。

在寫的時候，你要一直念一個咒語，這樣對以後的學習會很有幫助，咒語就是:"Flutter一切皆元件！"有了這個印象後，我們剩下的課程就好學了。

看一下最基礎的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元件。

TextAlign屬性

TextAlign屬性就是文字的對齊方式，它的屬性值有如下幾個（詳細請看視訊中講解）：

  • center: 文字以居中形式對齊,這個也算比較常用的了。
  • left:左對齊，經常使用，讓文字居左進行對齊，效果和start一樣。
  • right :右對齊，使用頻率也不算高。
  • start:以開始位置進行對齊，類似於左對齊。
  • end: 以為本結尾處進行對齊，不常用。有點類似右對齊.

總結起來，也就算三個對齊方式，left(左對齊)、center（居中對齊）、right（右對齊）。我們來看一下具體程式碼：

child:Text(
  'Hello JSPang  ,非常喜歡前端，並且願意為此奮鬥一生。我希望可以出1000集免費教程。',
  textAlign:TextAlign.left,
)
複製程式碼

maxLines屬性

設定最多顯示的行數，比如我們現在只顯示1行，類似一個新聞列表的題目。程式碼如下：

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,我們直接點選它，就會顯示我們電腦中安裝的虛擬機器，如果你電腦上沒有，也可以進行安裝。（詳細開視訊中如何進行配置）

alt

Alignment屬性

其實容器的作用就是方便我們進行佈局的，Flutter這點也作的很好，我們先來看容器屬性中的Alignment。

這個屬性針對的是Container內child的對齊方式，也就是容器子內容的對齊方式，並不是容器本身的對齊方式。

先作一個效果：建立一個容器，然後容器內加入一段文字Hello JSPang, 並讓它居中對齊。

alt

具體程式碼如下：

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,
),
複製程式碼

實現的效果如圖所示：

alt

這節課還是比較簡單的，下節課需要繼續學習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),
複製程式碼

這時候我們的結果就變成了下圖。

alt

有了這兩個屬性，基本就可以滿足我們的工作需要了。

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),
),
複製程式碼

alt

圖中可以看出，已經有了明顯的外邊距。

當然你也可以分別設定不同的外邊距，方法也是使用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的背景就變成了漸變顏色，如下圖。

alt

設定邊框

設定邊框可以在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容器元件，然後設定了不同顏色，效果如圖。

alt

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:網格的列數，相當於一行放置的網格數量。

圖片網格列表

加入文字作網格列表總是怪怪的，也不是很直觀，我們利用圖片來作一些網格列表。當然我們用一種更原生的方法，現在官方已經不鼓勵使用這種方法了，但是為了你碰到時，不至於不知道怎麼回事，所以我們作一下這種形式，但主要是為了作圖片佈局。

alt

程式碼如下：

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

相關文章