三、Flutter經常使用組件-Container容器組件

1、Container容器組件的使用

Container容器組件在Flutter是常用的組件，它就至關於HTML裏的<div>標籤，每一個視圖都離不開它，容器的做用就是方便咱們進行佈局的。

/**
 * 容器組件
 */
class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //容器組件
    return Container(
      child: Text(
        "Hello World",
        style: TextStyle(fontSize: 40.0),
      ),
      width: 500.0,
      height: 400.0,
      //color: Colors.lightBlue,
      //字內容對齊方式
      alignment: Alignment.topLeft,
      //內邊距
      padding: EdgeInsets.fromLTRB(10.0, 30.0, 0.0, 0.0),
      //外邊距
      margin: EdgeInsets.all(10.0),
      //修飾器
      decoration: BoxDecoration(
          //背景漸變
          gradient: LinearGradient(
              colors: [Colors.lightBlue, Colors.greenAccent, Colors.purple]
          ),
          //邊框
          border: Border.all(width: 2.0,color: Colors.red),
          //邊框圓角
          borderRadius:BorderRadius.all(Radius.circular(10.0))
      ),
    );
  }
}

實現效果以下圖：

• width、height和color屬性。

• Alignment屬性，針對的是Container內子內容的對齊方式，並非容器自己的對齊方式。

  • center：縱橫雙向居中對齊。

  • centerLeft：縱向居中橫向居左對齊；centerRight：縱向居中橫向居右對齊。

  • topCenter：頂部居中對齊。

  • topLeft：頂部左對齊。topRight： 頂部右對齊。

  • bottomCenter:下部居中對齊。

  • botomLeft: 下部左對齊。bottomRight：下部右對齊。

• padding屬性就是一個內邊距，指的是Container邊緣和子內容的距離。

  • EdgeInsets.all(10.0)，左右上下內邊距所有爲10
  • EdgeInsets.fromLTRB(value1,value2,value3,value4)，LTRB分別表明左、上、右、下內邊距。

• margin屬性，margin是外邊距，指的是container和外部元素的距離。基本用法與padding類似。

  • EdgeInsets.all(10.0)，左右上下外邊距所有爲10
  • EdgeInsets.fromLTRB(value1,value2,value3,value4)，LTRB分別表明左、上、右、下外邊距。

• decoration屬性，修飾器，主要的功能是設置背景和邊框。與color屬性互斥

  • BoxDecoration
    • gradient：背景漸變，常規使用LinearGradient
    • border：邊框，常規使用Border.all(width:2.0,color:Colors.red)
    • borderRadius：邊框圓角，常規使用BorderRadius.all(Radius.circular(10.0))