Flutter入門（7）：Flutter 組件之 Container 詳解

1. Container 介紹

基礎屬性不做太多介紹，有興趣的可以去Flutter 中文網 了解一下。

2. 示范代碼

代碼下載地址。如果對你有幫助的話記得給個關注，代碼會根據我的 Flutter 專題不斷更新。

container.dart 路徑如下
/FMStudyApp/lib/Widgets/BaseWidget/container.dart

3. 基本屬性

優雅的編程，我們先單獨創建一個 container.dart 文件，用來試用 Container 的屬性和效果。

import 'package:flutter/material.dart';

class FMContainerVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Container",
          ),
          backgroundColor: Colors.lightBlue,
        ),
        body: _container(),
      ),
    );
  }

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
    );
  }
}

4. 顏色與大小

直接使用 color 屬性改變背景色，使用 width 設置寬度，使用 height 屬性設置高度。

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      width: 320,
      height: 200,
      color: Colors.red,
    );
  }

使用 constraints 屬性來改變 container 大小

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      color: Colors.red,
    );
  }

使用約束來改變 container 的位置與大小，同時設置了大小和約束并且有沖突時，會優先執行約束。

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      color: Colors.red,
      // 此時優先執行約束，會擠壓寬度小于 320
      margin: const EdgeInsets.only(left: 150, top: 100, right: 30),
    );
  }

5. Border 邊框設置

不得不贊一下，flutter 的邊框真的是自定義起來非常的方便，可以給4個邊指定不同的顏色，也可以給4個角不同的圓角。

我們先給這個 container 添加一個邊框，使用 decoration 屬性，BoxDecoration 中的 border 屬性。

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
          color: Colors.red,
          width: 3,
        ),
      ),
    );
  }

注意：decoration 屬性和 color 屬性不可以同時使用，否則會如下報錯。在 decoration 屬性里也可以設置背景色，如需要同時使用邊框和背景色，可以在這里設置。

Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package:flutter/src/widgets/container.dart':
Failed assertion: line 283 pos 15: 'color == null || decoration == null'

我們在來改變一下邊框的角度

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
      ),
    );
  }
container border.png

其實這樣已經能解決大部分需求了，下邊我們在介紹下自定義邊框

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         color: Colors.yellow,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(0), 
            topRight: Radius.circular(0), 
            bottomLeft: Radius.circular(30), 
            bottomRight: Radius.circular(30)),
      ),
    );
  }
container border custom.png

下邊在自定義不同的邊框色

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
        border: Border(
            top: BorderSide(
              width: 3,
              color: Colors.cyan,
            ),
            left: BorderSide(
              width: 3,
              color: Colors.blue,
            ),
            right: BorderSide(
              width: 3,
              color: Colors.black,
            ),
            bottom: BorderSide(
              width: 3,
              color: Colors.orange,
            ),
         ),
       ),
    );
  }
container border colorful.png

注意：使用自定義 border 時，不可以使用 borderRadius 屬性，否則會有如下報錯

A borderRadius can only be given for a uniform Border.

6. 漸變色背景設置

使用 gradient 屬性給 container 設置漸變背景色。

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
        gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
    );
  }
container gradient.png

7. 設置背景圖

使用 image 屬性設置背景圖，其中 centerSlice 可以改變填充大小，可以自行實驗效果。

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
         image: DecorationImage(
            image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          // centerSlice: Rect.largest,
         ),
         gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
    );
  }
container image.png

8. 陰影

使用 boxShadow 屬性設置陰影。

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
         boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
         image: DecorationImage(
            image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          // centerSlice: Rect.largest,
         ),
         gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
    );
  }
container shadow.png

9. 旋轉

使用 transform 屬性設置旋轉，這里不做太多敘述了。

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
         boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
         image: DecorationImage(
            image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          // centerSlice: Rect.largest,
         ),
         gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
      transform: Matrix4.rotationZ(0.1),
    );
  }
container rotate.png

10. child 子控件

使用 child 屬性給 container 添加子控件，使用 padding 屬性設置子控件的范圍，使用 alignment 來設置子控件的居中屬性。

  Container _container() {
    return Container(
      // 在這里嘗試 Container 屬性效果
      constraints: BoxConstraints.expand(
        width: 320,
        height: 200,
      ),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 3,
         ),
         borderRadius: BorderRadius.circular(30),
         boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(10,10))],
         image: DecorationImage(
            image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
          // centerSlice: Rect.largest,
         ),
         gradient: LinearGradient(colors: [Colors.white, Colors.yellow], begin: FractionalOffset(0, 0), end: FractionalOffset(0, 1)),
      ),
      transform: Matrix4.rotationZ(0.1),
      alignment: Alignment.centerLeft,
      padding: const EdgeInsets.all(30),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 30,
          color: Colors.red,
        ),
      ),
    );
  }

padding 屬性，你可以理解為 child 距離該 container 4個邊框的邊界距離，例如 padding: const EdgeInsets.all(30),
就是距離 child 上方距離 container 上方 30，左右下三個方向同理

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。