Flutter學習筆記（10）--容器組件、圖片組件

如需轉載，請注明出處：Flutter學習筆記（10）--容器組件、圖片組件

上一篇Flutter學習筆記（9）--組件Widget我們說到了在Flutter中一個非常重要的理念"一切皆為組件"，在Flutter中，所有的元素皆由組件組成，比如說我們常用的文本、圖片、按鈕、動畫等等，接下來說一下在Flutter中最常用到的幾類組件。

• 容器組件

容器組件（Container）可以理解為在Android中的RelativeLayout或LinearLayout等，在其中你可以放置你想布局的元素控件，從而形成最終你想要的頁面布局。當然Flutter中的容器組件作為一個"容器"，肯定會有一些給我們提供一些屬性來約束我們容器內的組件，下面介紹一下容器組件（Container）的一些常用屬性及描述：

屬性名	類型	說明
key	Key	Container唯一標識符，用於查找更新
alignment	AlignmentGeometry	控制child的對其方式，如果Container或者Container父節點尺寸大於Child的尺寸，這個屬性設置會生效，有很多種對齊方式
padding	EdgeInsetsGeometry	Decoration內部的空白區域，如果有child的話，child位於padding內部
color	Color	用來設置Container背景色，如果foregroundDecoration設置的話，可能會遮蓋color效果
decoration	Decoration	繪制在child后面的裝飾，設置了Decoration的話，就不能設置color屬性，否則會報錯，此時應該在Decoration中進行顏色的設置
foregroundDecoration	Decoration	繪制在child前面的裝飾
width	double	Container的寬度，設置為double.infinity可以強制在寬度上撐滿
height	double	Container的高度，設置為double.infinity可以強制在高度上撐滿
constraints	BoxConstraints	添加到child上額外的約束條件
margin	EdgeInsetsGeometry	圍繞在Decoration和child之外的空白區域，不屬於內容區域
transform	Matrix4	設置Container的變換矩陣，類型為Matrix4
child	Widget	Container中的內容Widget

 

 

 

 

注：padding和margin的區別在於，padding是包含在content內，而margin則是外部邊界，設置點擊事件的話，padding區域會響應，而margin區域不會響應。

寫一個簡單的例子，體驗一下容器組件Container，主要是加了一個邊框及底色，示例代碼如下：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '容器組件demo',
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            //添加邊框裝飾效果
            decoration: BoxDecoration(
              color: Colors.blue,
              border: new Border.all(
                width: 10, //邊框粗細
                color: Colors.amberAccent //邊框顏色
              ),
              borderRadius: const BorderRadius.all(const Radius.circular(5)) //邊框圓角
            ),
            child: Text(
              'Flutter Container Demo',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

 

　頁面截圖如下：

講解一下上面的代碼，其實很簡單，就是在body內放置了一個container組件和一個text組件，給容器組件container設置的寬、高、背景色、邊框、邊框圓角、邊框的粗細以及邊框的顏色，然后在容器container內放了一個text組件，並設置的text的對齊方式以及字體大小。

看到頁面可能有人會問，為什么這個容器會在頁面的正中央呢？這是因為body的內容設置的屬性為center居中。

簡單說幾點屬性的可選值比如textAlign（文本的對齊方式）、BorderRadius（圓角）、TextStyle（字體樣式），最直接的還是讓大家看一下截圖，如下：

大家可以從提示中看到，textAlign（文本的對齊方式）有左對齊、右對齊、居中等等，BorderRadius（圓角）有對右上、左上、右下、左下單獨設置圓角的屬性，TextStyle（字體樣式）有顏色、大小、行高、陰影、粗細等等屬性，這里我們就不一一說明了，感興趣的同學可以自己嘗試一下。

Container小結：

說實話這也是我第一次開始用Flutter寫一個簡單的界面Demo，作為一個Android程序員來講，感覺不是很習慣，好在我有weex的開發經歷，寫過很多vue的頁面，其實在Flutter里面寫頁面就是一層一層的child嵌套，用無數個child堆積出一個頁面，現在寫的Demo很簡單，不知道以后頁面復雜了，會不會把自己嵌套懵了.......

• 圖片組件

圖片組件（Image）是顯示圖像的組件，Image組件有多種構造函數

　　1.new Image：從ImageProvider獲取圖像

　　2.new Image.asset：加載資源圖片

　　3.new Image.file：加載本地圖片文件

　　4.new Image.newwork：加載網絡圖片

　　5.new Image.memory：加載Uint8List資源圖片

 

Image組件屬性及描述

屬性	類型	說明
image	ImageProvider	抽象類，需要自己實現獲取圖片數據的操作
width/heyght	double	Image顯示區域的寬度和高度，這里需要把Image和圖片兩個東西區分開，圖片本身有大小，Image Width是圖片的容器，本身也有大小，寬度和高度的配置通常和fit屬性配合使用
fit	BoxFit	圖片填充模式，具體取值見下一個表
color	Color	圖片顏色
colorBlendMode	BlendMode	在對圖片進行手動處理的時候，可能用到圖層混合，如改變圖片的顏色。此屬性可以對顏色進行混合處理。
alignment	Alignment	控制圖片的擺放位置，比如圖片放置在右下角則為Alignment.BottomRight
repeat	ImageRepeat	此屬性可以設置圖片的重復模式，noRepeat為不重復，Repeat為x和y方向重復，repeatX為x方向重復，repeatY為y方向重復
centerSlice	Rect	當圖片需要被拉伸顯示時，centerSlice定義的舉行區域會被拉伸，可以理解成我們在圖片內部定義一個9個點文件用作拉伸，9個點為上、下、左、右、上中、下中、左中、右中、正中
matchTextDirection	bool	matchTextDirection和Directionality配合使用，TextDirection有兩個值，分別為TextDirection.ltr從左向右展示圖片與TextDirection.rtl從右向左展示圖片
gaplessPlayback	bool	當ImageProvider發生變化后，重新加載圖片的過程中，原圖片的展示是否保留，值為true則保留，值為false則不保留，直接空白等待下一張圖片加載

 

BoxFit取值及描述

取值	描述
BoxFit.fill	全圖顯示，顯示可能拉伸，充滿
BoxFit.contain	全圖顯示，顯示原比例，不需充滿
BoxFit.cover	顯示可能拉伸，可能裁剪，充滿
BoxFit.fitWidth	顯示可能拉伸，可能裁剪，寬度充滿
BoxFit.fitHeight	顯示可能拉伸，可能裁剪，高度充滿
BoxFit.none	原始大小
BoxFit.scaleDown	效果和BoxFit.contain差不多，但是此屬性不允許顯示超過源圖片大小，即可小不可大

 

 

 

 

 

 

 

 

 

 

 

 

按照慣例附上一段Demo：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '圖片組件Demo',
      home: new Center(
        child: Container(
          color: Colors.white,
          child: new Image.network(
            'https://flutter.io/images/homepage/header-illustration.png',
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

 

按照慣例附上效果截圖：

上面可以看出，我給從網絡上獲取的圖片設置的寬、高分別為200，但是我並沒有設置圖片的填充模式，那么我把填充模式設置為fitHeight會怎么樣呢？

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '圖片組件Demo',
      home: new Center(
        child: Container(
          color: Colors.white,
          child: new Image.network(
            'https://flutter.io/images/homepage/header-illustration.png',
            width: 200,
            height: 200,
            fit: BoxFit.fitHeight,
          ),
        ),
      ),
    );
  }
}

 

 

 可以看的出來，高度充滿了，但是水平方向被拉伸了。

其他的圖片屬性以及填充方式的屬性，我就不一一給大家演示了，我嘗試了很多種組合，發現還挺有意思的，希望大家也能多多的進行嘗試！

 

下一章節：Flutter學習筆記（11）--文本組件、圖標及按鈕組件