Flutter 容器類組件

概述

• 容器類組件通常只能接收一個子元素，對齊添加一些修飾、變換、限制等，
• 布局類組件可以接收一個或多個子元素，通常只是對子元素行程排序操作，

Container

width & height：可以設定組件的寬高，優先級最高，

constraints：約束條件，也可以指定組件寬高，

color：組件背景顏色，

decoration：背景裝飾，與color屬性互斥，

padding & margin：內邊距和外編輯，本質都是通過Padding組件實作的，

Container(
    width: 100,
    height: 50,
    color: Colors.blue,
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(10),
    alignment: Alignment.center,
    child: Text("hello world"),
)

Container(
    margin: EdgeInsets.all(50),
    constraints: BoxConstraints.tightFor(width: 200, height: 150),
    decoration: BoxDecoration(
        gradient: RadialGradient(
            colors: [Colors.blue.shade800, Colors.blue.shade200],
            center: Alignment.center,
            radius: 0.5,
        ),
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 2,
            ),
        ],
    ),
    transform: Matrix4.rotationZ(0.2),
    transformAlignment: Alignment.center,
    alignment: Alignment.center,
    child: Text("hello world"),
)

Padding

設定組件內邊距，

EdgeInsets

EdgeInsets.all()：四個方向內邊距使用相同的內邊距，

EdgeInsets.fromLTRB()：可以同時設定不同的內邊距，

EdgeInsets.symmetric()：同時設定水平方向或垂直方向的內邊距，

EdgeInsets.only()：具體設定某個方向的內邊距，

Container(
    color: Colors.red,
    child: Padding(
        padding: EdgeInsets.all(10),
        child: Text("hello world"),
    ),
),
Container(
    color: Colors.green,
    child: Padding(
        padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
        child: Text("hello world"),
    ),
),
Container(
    color: Colors.blue,
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        child: Text("hello world"),
    ),
)

DecoratedBox 裝飾

DecoratedBox可以在子組件繪制之前或之后繪制一些裝飾，如背景、邊框、漸變等，

DecoratedBox

child：設定子元素，

position：設定背景裝飾或前景裝飾，

• DecorationPosition.background：背景裝飾
• DecorationPosition.foreground：前景裝飾

decoration：需要繪制的裝飾，

BoxDecoration

屬于Decoratin的子類，用于裝飾元素的繪制，一般直接用BoxDecoration類，

color：顏色，

gradient：漸變色，

borderRadius：圓角，

boxShadow：陰影，可以添加多個，

shape：形狀，

• BoxShape.rectangle：矩形
• BoxShape.circle：圓形

DecoratedBox(
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
        child: Text("登陸"),
    ),
    position: DecorationPosition.background,
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Colors.green, Colors.blue],
        ),
        borderRadius: BorderRadius.circular(3),
        shape: BoxShape.rectangle,
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 4,
            ),
        ],
    ),
),
SizedBox(height: 10),
DecoratedBox(
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
        child: Text("登陸"),
    ),
    position: DecorationPosition.background,
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Colors.green, Colors.blue],
        ),
        shape: BoxShape.circle,
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 4,
            ),
        ],
    ),
)

Transform 變換

Transform可以對子元素添加一些特效，

Transform的變化是在繪制階段，而不是布局階段，所以子組件所占用的空間大小的都是不變的，

平移

DecoratedBox(
    child: Transform.translate(
        offset: Offset(10, 10), //默認原點左上角，向右平移10，向下平移10
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

旋轉

DecoratedBox(
    child: Transform.rotate(
        angle: math.pi / 2, //選擇90度
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

縮放

DecoratedBox(
    child: Transform.scale(
        scale: 2,
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

傾斜

Container(
    color: Colors.black,
    child: Transform(
        alignment: Alignment.topRight,
        transform: Matrix4.skewY(0.3),
        child: Container(
            padding: EdgeInsets.all(8),
            color: Colors.red,
            child: Text("  hello transform!  "),
        ),
    ),
)

RotatedBox

RotatedBox與Transform.rotate()功能類似，但是RotatedBox是變化是在layout階段，所以會影響子組件的位置和大小，

DecoratedBox(
    child: RotatedBox(
        quarterTurns: 1,
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

Clip 剪裁

Flutter提供了一些剪裁工具，用于對組件的剪裁，

ClipOval：剪裁為圓形，

ClipRect：剪裁為矩形，

ClipRRect：剪裁為圓角矩形，

avatar, //原圖對比
ClipOval(
    child: avatar,
),
ClipRect(
    child: avatar,
),
ClipRRect(
    child: avatar,
    borderRadius: BorderRadius.circular(10),
),

自定義剪裁

getClip()：設定剪裁區域，

shouldReclip()：是否需要重新剪裁，

DecoratedBox(
    decoration: BoxDecoration(color: Colors.red),
    child: ClipRect(
        clipper: MyClipper(),
        child: avatar,
    ),
)

class MyClipper extends CustomClipper<Rect> {
    @override
    Rect getClip(Size size) {
        return Rect.fromLTWH(0, 0, 30, 30);
    }

    @override
    bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
        return false;
    }
}

FittedBox

FittedBox可以處理子元素大小超過父組件的大小的情況，

Text("原始"),
Container(
    width: 50,
    height: 50,
    color: Colors.red,
    child: Container(
        width: 60,
        height: 70,
        color: Colors.green,
    ),
),
SizedBox(height: 10),
Text("BoxFit.none"),
Container(
    width: 50,
    height: 50,
    color: Colors.red,
    child: FittedBox(
        fit: BoxFit.none,
        child: Container(
            width: 60,
            height: 70,
            color: Colors.green,
        ),
    ),
),
SizedBox(height: 10),
Text("BoxFit.contain"),
Container(
    width: 50,
    height: 50,
    color: Colors.red,
    child: FittedBox(
        fit: BoxFit.contain,
        child: Container(
            width: 60,
            height: 70,
            color: Colors.green,
        ),
    ),
)