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）--文本組件、圖標及按鈕組件