【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控制項Container

作者 | 弗拉德
來源 | 弗拉德(公眾號:fulade_me)

Container

我們先來看一下Container初始化的參數:

  Container({
    Key key,
    // 位置 居左、居右、居中
    this.alignment, 
    // EdgeInsets Container的內邊距
    this.padding,
    // 背景顏色  
    this.color,
    // 背景裝飾器
    this.decoration,
    // 前景裝飾器
    this.foregroundDecoration,
    // 寬度
    double width,
    // 告訴
    double height,
    // 約束
    BoxConstraints constraints,
    // EdgeInsets Container的外邊距
    this.margin,
    // 旋轉
    this.transform,
    // 子控制項
    this.child,
    // 裁剪Widget的模式 
    this.clipBehavior = Clip.none,
  }) 

注意:

  • Containercolor屬性與屬性 decorationcolor存在衝突,如果兩個color都做了設置,默認會以decorationcolor為準。
  • 如果我們沒有給Container設置widthheightContainer會跟child的大小一樣;假如我們沒有設置child的時候,它的尺寸會極大化,儘可能的充滿它的父Widget

1. 最簡單的Container

Container(
    child: Text("Fulade"),
    color: Colors.red,
)

Container接收一個child參數,我們可以傳入Text作為child參數,然後傳入是一個顏色。
2020_12_28_container_normal

2. Padding

Container(
    child: Text("Pading 10"),
    padding: EdgeInsets.all(10),
    color: Colors.blue,
)

Padding是內邊距,我們在這裡設置了padding: EdgeInsets.all(10),也就是說Text距離Container的四條邊的邊距都是10。
2020_12_28_container_padding

3. Margin

Container(
    child: Text("Margin 10"),
    margin: EdgeInsets.all(10),
    color: Colors.green,
)

Margin是外邊距,我們在這裡設置了margin: EdgeInsets.all(10)Container在原有大小的基礎上,又被包圍了一層寬度為10的矩形。
需要注意,綠色外圍的白色區域也是屬於Container的一部分。
2020_12_28_container_margin

4. transform

Container(
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(10),
    child: Text("transform"),
    transform: Matrix4.rotationZ(0.1),
    color: Colors.red,
)

transform可以幫助我們做旋轉,Matrix4給我們提供了很多的變換樣式。
2020_12_28_container_transform

5. decoration
decoration可以幫助我們實現更多的效果。例如形狀、圓角、邊界、邊界顏色等。

Container(
    child: Text("Decoration"),
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(10),
    decoration: BoxDecoration(
        color: Colors.red,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.all(Radius.circular(5)),
    ),
)

2020_12_28_container_decoration
這裡就是設置了一個圓角的示例,同樣我們對BoxDecorationcolor屬性設置顏色,對整個Container的也是有效的。

6. 顯示 Image

Container(
    height: 40,
    width: 100,
    margin: EdgeInsets.all(10),
    decoration: BoxDecoration(
        image: DecorationImage(
                image: AssetImage("images/flutter_icon_100.png"),
                fit: BoxFit.contain,
            ),
    ),
)

BoxDecoration可以傳入一個Image對象,這樣就靈活了很多,Image可以來自本地也可以來自網路。
2020_12_28_container_image

7. Border

Container(
    child: Text('BoxDecoration with border'),
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(5),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circula(12),
        border: Border.all(
            color: Colors.red,
            width: 3,
        ),
    ),
)

使用border可以幫助我們做邊界效果,還可以設置圓角borderRadius,也可以設置border的寬度,顏色等。
2020_12_28_container_border

8. 漸變色

Container(
    padding: EdgeInsets.symmetric(horizontal: 20),
    margin: EdgeInsets.all(20), //容器外填充
    decoration: BoxDecoration(
        gradient: RadialGradient(
            colors: [Colors.blue, Colors.black, Colors.red],
            center: Alignment.center,
            radius: 5
        ),
    ),
    child: Text(
        //卡片文字
        "RadialGradient",
        style: TextStyle(color: Colors.white),
    ),
)

BoxDecoration的屬性gradient可以接收一個顏色的數組,Alignment.center是漸變色開始的位置,可以從左上角右上角中間等位置開始顏色變化。

2020_12_28_container_radialGradient

想體驗以上的Container的示例的運行效果,可以到我的Github倉庫項目flutter_app->lib->routes->container_page.dart查看,並且可以下載下來運行並體驗。


公眾號