Flutter 基礎Widgets之容器Container詳解

container概述

Container是一個很是經常使用的容器組件，它包含了常規的Padding、BoxDecoration、DecorationImage、Border、BoxShaow、transform等等一系列Widgets。

構造函數

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })
複製代碼

• alignment child的對齊方式 Alignment(0.0,0.0)表示矩形的中心。從-1.0到+1.0的距離是矩形的一邊到另外一邊的距離。所以，2.0單位水平(或垂直)等於矩形的寬度(或高度)。
• padding 在容器內填充，填充物爲child 和alignment對齊會有衝突，可是最終仍是padding主導 能夠上下左右均可以填充 symmetric 垂直或水平的填充， only 填充一個方向
• color 容器背景顏色 此處是 decoration: new BoxDecoration(color: color) 簡寫，即不能同時decoration和color使用，衝突時固然是將color放在Boxdecoration中設置執行

---

• decoration 由此類提供全部裝飾的抽象接口定義，可使用boxDEcoration，其提供了多種裝飾能力

boxDecoration 構造函數

const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })
複製代碼

• color 背景顏色

---

• image 背景圖片 使用DecorationImage定義：

DecorationImage構造函數

const DecorationImage({
    @required this.image,
    this.colorFilter,
    this.fit,
    this.alignment = Alignment.center,
    this.centerSlice,
    this.repeat = ImageRepeat.noRepeat,
    this.matchTextDirection = false,
  })
複製代碼

---

• image 即圖片源，可以使用的子類： AssetBundleImageProvider FileImage MemoryImage NetworkImage 此處選擇網絡圖片

NetworkImage構造函數

const NetworkImage(this.url, { this.scale = 1.0 , this.headers })
複製代碼

• url 即網絡圖片地址
• scale 圖像比例，數值越大圖片比例越小
• headrs 請求圖像的頭信息

---

• colorFilter 彩色濾鏡
• fit 怎麼將圖像填充到容器中 好比contain 儘量大，但將圖像徹底包含在目標框中
• alignment 在範圍對圖像進行對齊操做
• repeat 圖片重複的方向，repeat 即x 軸和y 軸都重複 而後 repeatX 即在X方向重複
• matchTextDirection 是否在 TextDirection 方向繪圖
• border Border能夠獨立繪製上下左右獨立邊框的顏色，寬度等 固然也可使用封裝好的好比 all，直接繪製邊框
• borderRadius 圓角的繪製

---

• boxShadow 盒子的陰影列表，形狀隨盒子而變 BoxShadow定義

BoxShadow構造函數

const BoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0,
    this.spreadRadius = 0.0
複製代碼

• color 陰影顏色
• offset 陰影的相對盒子的偏移量
• blueRadius 陰影的模糊程度
• spreadRadius 相似陰影的膨脹程度，能夠理解爲陰影的大小

---

• gradient 漸變類，通常使用 LinearGradient

LinearGradient構造函數

const LinearGradient({
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    @required List<Color> colors,
    List<double> stops,
    this.tileMode = TileMode.clamp,
  })
複製代碼

• begin 漸變量開始的位置
• end 漸變量結束的位置
• colors 漸變的基色
• tileMode 定義漸變梯度的邊緣 對比image的repeat

---

• shape 形狀
• foregroundDecoration 前景裝飾
• width 寬度
• height 高度

---

• constraints 限制容器大小 通常使用BoxConstraints

BoxConstraints構造函數

const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity
  });
複製代碼

• minWidth 最小寬度
• maxWidth 最大寬度
• minHeight 最小高度
• maxHeight 最大高度

---

• margin 容器外填充
• transform 對容器實現矩陣變換操做
• child 子組件

實例構造及註釋詳解

下面實現了一個傾斜的全面屏手機任務運行界面：

// container 詳解學習

import 'package:flutter/material.dart';
class ContainerLearn extends StatelessWidget {
  final _textStyle = TextStyle(
      color: Colors.white,
      fontSize: 20,
      letterSpacing: 4,
      wordSpacing: 4,
      shadows: [
        Shadow(color: Colors.black87, offset: Offset(5, 5), blurRadius: 8)
      ]);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Container'),
      ),
      // 一個方便的小部件，它組合了常見的繪畫、定位和大小小部件。
      body: new Container(
          // 控制容器中child的位置，能夠輸入座標參數，也能夠設置預先設定的座標位置
          // Aliment(0.0,0.0)表示矩形的中心。從-1.0到+1.0的距離是矩形的一邊到另外一邊的距離。所以，2.0單位水平(或垂直)等於矩形的寬度(或高度)。
          alignment: Alignment(0, 1),
          // 在容器內填充，填充物爲child 和alignment對齊會有衝突，可是最終仍是padding主導 能夠上下左右均可以填充 symmetric 垂直或水平的填充， only 填充一個方向
          padding: EdgeInsets.symmetric(vertical: 60, horizontal: 75),
          // 容器背景顏色 此處是 decoration: new BoxDecoration(color: color) 簡寫，即不能同時decoration和color使用，衝突時固然是將color放在Boxdecoration中設置執行
          // color: Colors.blueAccent,
          // 由此類提供全部裝飾的抽象接口定義，可使用boxDEcoration，其提供了多種裝飾能力
          decoration: BoxDecoration(
              // 背景顏色
              color: Colors.blueAccent,
              // 背景圖像
              image: DecorationImage(
                  // 可以使用的子類： AssetBundleImageProvider FileImage MemoryImage NetworkImage
                  image: NetworkImage(
                      'https://flutter.cn/assets/get-started/ios/hello-world-ed7cf47213953bfca5eaa74fba63a78538d782f2c63a7c575068f3c2f7298bde.png',
                      // 圖像比例，數值越大圖片比例越小
                      scale: 3.0,
                      // 請求圖像的頭信息
                      headers: {
                        'User-Agent':
                            'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'
                      }),
                  // 彩色濾鏡，此處爲覆蓋一個black12濾鏡
                  colorFilter:
                      ColorFilter.mode(Colors.black12, BlendMode.srcOver),
                  // 怎麼將圖像填充到容器中 好比contain 儘量大，但將圖像徹底包含在目標框中
                  fit: BoxFit.none,
                  // 在範圍對圖像進行對齊操做
                  alignment: Alignment.center,
                  // 對於可拉伸圖片的切片操做？ 不是很懂
                  // centerSlice: Rect.fromLTRB(3,3,3,3)
                  // 圖重複的方向，repeat 即x 軸和y 軸都重複 而後 repeatX 即在X方向重複
                  repeat: ImageRepeat.repeatX,
                  // 是否在 TextDirection 方向繪圖
                  matchTextDirection: false),
              // 邊框 BoxDecoration 抽象類 使用子類有 Border BorderDirectional
              // Border能夠獨立繪製上下左右獨立邊框的顏色，寬度等 固然也可使用封裝好的好比 all，直接繪製邊框
              border: Border.all(
                  color: Colors.black87,
                  width: 2.0,
                  // 邊框樣式
                  style: BorderStyle.solid),
              // 圓角
              borderRadius: BorderRadius.circular(30),
              // 盒子的陰影列表，形狀隨盒子而變
              boxShadow: <BoxShadow>[
                BoxShadow(
                    // color 陰影顏色 offset 陰影的相對盒子的偏移量， blueRadius 陰影的模糊程度 spreadRadius 相似陰影的膨脹程度，能夠理解爲陰影的大小
                    color: Colors.black45,
                    offset: Offset(8, 8),
                    blurRadius: 7,
                    spreadRadius: 7)
              ],
              // Gradient 抽象類定義 漸變類 LinearGradient
              gradient: LinearGradient(
                  // 漸變偏移量開始的位置
                  begin: Alignment(-1, 0),
                  // 漸變偏移結束的位置
                  end: Alignment(1, 0),
                  // 繪製的基色
                  colors: <Color>[Colors.purple, Colors.blue[900]],
                  // 建立一個線性梯度 0~1.0 這個不懂
                  // stops: <double>[0.6],
                  // 定義漸變梯度的邊緣 對比image的repeat
                  tileMode: TileMode.clamp),
              // 形狀
              shape: BoxShape.rectangle),
          // 前景裝飾
          foregroundDecoration: BoxDecoration(),
          // 長度
          width: 224,
          // 高度
          height: 486,
          // 限制容器大小
          constraints: BoxConstraints(
            // 設置寬度儘量大
            // minWidth: double.infinity,
            // 最小高度20
            minHeight: 20,
            // 最大寬度 300
            maxWidth: 300,
          ),
          // 容器外填充
          margin: EdgeInsets.symmetric(vertical: 20, horizontal: 0),
          // 對容器實現矩陣變換操做，Matrix是一個4D矩陣
          transform: Matrix4.skewY(0.3)..rotateZ(-3.14 / 12.0),
          child: Icon(
            Icons.close,
            color: Colors.white70,
            semanticLabel: 'Close',
          )),
    );
  }
}

複製代碼

構造效果