第五節(jié):Flutter 中Container容器組件

1. Container組件的了解

關(guān)于container組件的介紹:

Container是一個組合類的容器樟插，本身并不對應(yīng)具體的RenderObject
Container是DecorationBox,Padding,Align,Align等一些組建的組合
因此可以通過Container組件實現(xiàn)同時需要裝飾,變換,限制等場景

1.1 Container源碼中的參數(shù)

Container({
    Key key,
    this.alignment,
    this.padding,       //容器內(nèi)補(bǔ)白屠尊，屬于decoration的裝飾范圍
    this.color,         // 背景色
    this.decoration,    // 背景裝飾
    this.foregroundDecoration,  // 前景裝飾
    double width,            //容器的寬度
    double height,            //容器的高度
    BoxConstraints constraints,  //容器大小的限制條件
    this.margin,           //容器外補(bǔ)白抖韩，不屬于decoration的裝飾范圍
    this.transform,       //變換
    this.child,
    this.clipBehavior = Clip.none,
})

1.2 Container 容器組件常用參數(shù)

名稱	功能
alignment	topCenter 頂部居中對齊<br />topLeft: 頂部左對齊<br />topRight: 頂部右對齊<br />center: 水平垂直居中對齊<br />centerLeft: 垂直居中,水平左對齊<br />centerRight: 垂直居中,水平右對齊<br />bottomCenter: 底部居中對齊<br />bottomLeft: 底部左對齊<br />bottomRight: 底部有對齊
decoration	decoration: BoxDecoration(<br /> color: Colors.blue,<br /> border: Border.all(<br /> color: Colors.red,<br /> width: 2.0<br /> )<br /> BorderRadius.all(<br /> Radius.circular(8.0)<br /> )<br /> )
width	容器的寬度 double值
height	容器的高度 double值
margin	margin 屬性表示Container與外部的其他組件的距離<br />EdgeInsets.all(20.0)
padding	padding 就是Container的內(nèi)邊距,指Container邊緣與child之間的距離<br />padding: EdgeInsets.all(10.0)
transform	讓Container容易進(jìn)行一些轉(zhuǎn)換之類的
child	子組件

1.3 容器參數(shù)注意項

容器大小可以通過width,height指定,也可通過constraints指定
如果同時存在,width,height優(yōu)先
color和decoration是互斥的,同時存在會報錯
因為指定color時,Container內(nèi)部會自動創(chuàng)建decoration

1.4 Container組件使用示例

在示例中,同時復(fù)習(xí)了一下Text組件所學(xué)內(nèi)容

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Text(
                    "你好,Flutter",                           // 文本內(nèi)容
                    // 關(guān)于Text組件參數(shù)的復(fù)習(xí)
                    style: TextStyle(
                        fontSize: 30.0,                       // 字體大小
                        height: 2,                            // 行高
                        color: Colors.white,                  // 文字顏色
                        fontWeight: FontWeight.bold,          // 文字粗體
                        fontStyle: FontStyle.italic,          // 文字斜體
                        letterSpacing: 6,                     // 字間距
                        decoration: TextDecoration.underline, // 下劃線

                    )
                ),
                width: 300,                         // 容器寬度
                height: 300,                        // 容器的高度
                // 容器的背景顏色color, 不能與decoration同時使用
                // color: Colors.blue,      
                padding: EdgeInsets.all(10),        // 容器的padding
                transform: Matrix4.rotationZ(0.1),  // X軸旋轉(zhuǎn)0.1弧度
                decoration: BoxDecoration(   //容器的描述
                    color: Colors.green,     // decoration中也有color,背景顏色
                )
            )
        );
    }
}

顯示結(jié)果

container容器組件_圖1.png

在Container組件的使用過程中,我們會發(fā)現(xiàn)很多屬性需要其他組件來修飾,

接下來,我們看看其他的組件信息

2. Padding 填充

Padding可以給其子節(jié)點添加填充（留白）色冀，也就是我們通常所說的內(nèi)邊距

Container組件中的padding參數(shù)是有EdgeInsets類(組件)進(jìn)行修飾

2.1 EdgeInsets

先看一下EdgeInsets修飾值的方法

formLTRB(double left, double top, double right, double bottom)分別指定四個方向
all(double value), 所有方向設(shè)置相同值的padding
only({left ,top, right ,bottom}), 可以設(shè)置具體某個發(fā)方向的填充
symmetric({vertical,horizontal}) 用于設(shè)置對稱方向的填充

vertical 指的是top和bottom , horizontal 指的是left和right

2.2 示例代碼

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Text(
                    "你好,Flutter",       // 文本內(nèi)容
                    style: TextStyle(
                        fontSize: 30.0,     // 字體大小
                        color:Colors.white,
                        height: 2,          // 行高
                        letterSpacing: 6,   // 字間距
                    )
                ),
                width: 300,               // 容器寬度
                height: 300,              // 容器的高度
                
                // padding值設(shè)置的四種方法:
           
                // 1.all方法: 四個方向的padding都是10
                //padding: EdgeInsets.all(10), 
                
                // 2.fromLTRB: 左上右下paddin值為10,20,30,0
                //padding: EdgeInsets.fromLTRB(10,20,30,0), 
                
                 // 3.only: 值是可選參數(shù), 只有l(wèi)eft有20px的padding
                //padding: EdgeInsets.only(left: 20),   
                
                // 4.symmetric: 值是可選參數(shù), 只有左右有30px的padding
                padding: EdgeInsets.symmetric(horizontal: 30), 
                
                
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景顏色
                )
            )
        );
    }
}

顯示結(jié)果:

padding填充_圖2.png

3. DecoratedBox 裝飾容器

DecoratedBox可以在其子組件繪制前(或后)繪制一些裝飾（Decoration）昆箕，如背景晰韵、邊框惹挟、漸變等。DecoratedBox定義如下：

const DecoratedBox({
    Decoration decoration,
    DecorationPosition position = DecorationPosition.background,
    Widget child
})

decoration：代表將要繪制的裝飾溯乒，它的類型為Decoration夹厌。Decoration是一個抽象類.

但是我們通常使用BoxDecoration,BoxDecoration是Decoration的一個子類

3.1 BoxDecoration

BoxDecoration用來實現(xiàn)了常用的裝飾元素的繪制

參數(shù)

BoxDecoration({
    Color color,                         //顏色
    DecorationImage image,               //圖片
    BoxBorder border,                    //邊框
    BorderRadiusGeometry borderRadius,   //圓角
    List<BoxShadow> boxShadow,           //陰影,可以指定多個
    Gradient gradient,                   //漸變
    BlendMode backgroundBlendMode,       //背景混合模式
    BoxShape shape = BoxShape.rectangle, //形狀
})

3.2 示例代碼

Widget build(BuildContext content){
    return Center(
        child: Container(
            child: Text(
                "按鈕",       // 文本內(nèi)容
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 20.0,     // 字體大小
                    color:Colors.white,
                    height: 2,          // 行高
                    letterSpacing: 6,   // 字間距
                )
            ),
            width: 100,               // 容器寬度
            height: 50,              // 容器的高度

            decoration: BoxDecoration(
                // 背景漸變
                gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), 
                borderRadius: BorderRadius.circular(10.0),  // 10像素圓角
            )
        )
    );
}
}

結(jié)果

裝飾容器_圖3.png

4. 變換 Transform

Transform可以在其子組件繪制時對其應(yīng)用一些矩陣變換來實現(xiàn)一些特效。

Matrix4是一個4D矩陣裆悄，通過它我們可以實現(xiàn)各種矩陣操作矛纹，

至于矩陣變換,不是我們的重點, 矩陣是線性代數(shù)的概念,我們只需要了解Flutter中如何使用就OK了

4.1 變換示例:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Text(
                    "按鈕",       // 文本內(nèi)容
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 20.0,     // 字體大小
                        color:Colors.white,
                        height: 2,          // 行高
                        letterSpacing: 6,   // 字間距
                    )
                ),
                width: 100,               // 容器寬度
                height: 50,              // 容器的高度

                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景顏色
                ),
                // transform的變化
                
                // 變化位移
                //transform: Matrix4.translationValues(10, 100, 0),
                
                // 旋轉(zhuǎn)
                //transform: Matrix4.rotationZ(0.3),
                
                // 縮放
                transform: Matrix4.diagonal3Values(0.5, 1, 1) ,
            )
        );
    }
}