Flutter免費視訊第三季-佈局元件講解

阿新 • • 發佈：2018-12-10

視訊目錄在文章最後，你可以跳到最後進行觀看

Flutter第二季學完，你已經可以作一些效果出來了。但是你想隨心所欲的進行佈局頁面效果，還是感覺有些吃力，這個你不要擔憂，這季教程學完你就可以精通Flutter的佈局了，並且在對Flutter的瞭解上有更深層次的瞭解。

這季裡我我會講解水平佈局、垂直佈局、GridView佈局、ListView佈局、Container佈局......等多種佈局形式。

你學習這季視訊，最好可以先學一下前兩季，這樣可以保證你學起來更順暢和容易。貼出前兩季的文章路徑。

第一季Flutter視訊教程地址：jspang.com/post/flutte…
第二季Flutter視訊教程地址：

jspang.com/post/flutte…

當然，如果你想和大家一起學習和討論，還可以加入專門的Flutter群，我們一起學習。

第01節：水平佈局Row的使用

Flutter中的row控制元件就是水平控制元件，它可以讓Row裡邊的子元素進行水平排列。

Row控制元件可以分為靈活排列和非靈活排列兩種，這兩種模式都需要熟練掌握，等經驗豐富後可根據需求進行使用。

不靈水平佈局

從字面上就可以理解到，不靈活就是根據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…

第四節視訊：www.bilibili.com/video/av358…

第五節視訊：www.bilibili.com/video/av358…