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

弗拉德發表於2020-12-28
FlutterUI控制元件AI

作者 | 弗拉德
來源 | 弗拉德（公眾號：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,
  })

注意：

  • Container 的color屬性與屬性 decoration的color存在衝突，如果兩個color都做了設定，預設會以decoration的color為準。
  • 如果我們沒有給Container設定width和height，Container會跟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
這裡就是設定了一個圓角的示例，同樣我們對BoxDecoration的color屬性設定顏色，對整個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檢視，並且可以下載下來執行並體驗。

公眾號

相關文章