Flutter学习笔记(三)——Container 容器组件

Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的

标签，每个页面或者说每个视图都离不开它。其实容器的作用就是方便我们进行布局的。

Alignment属性

这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。

建立一个容器，然后容器内加入一段文字 “Hello World”, 并让它居中对齐。

 body: Center(
            child: Container(
              child: Text(
                "Hello World",
                style: TextStyle(fontSize: 40),
              ),
              alignment:Alignment.center,
            ),
          ),

我们从上图可以看到alignment的属性：

bottomCenter:下部居中对齐。
botomLeft: 下部左对齐。
bottomRight：下部右对齐。
center：纵横双向居中对齐。
centerLeft：纵向居中横向居左对齐。
centerRight：纵向居中横向居右对齐。
topLeft：顶部左侧对齐。
topCenter：顶部居中对齐。
topRight： 顶部居左对齐。

设置宽、高和颜色属性

设置宽高只需要在属性名称后面加入浮点型数字就可以了，颜色设置和之前一样。

  child: Container(
              child: Text(
                "Hello World",
                style: TextStyle(fontSize: 40.0,color: Colors.purple),
              ),
              alignment:Alignment.center,
              width: 400.0,
              height: 500.0,
              color: Colors.blueAccent,
            ),

padding属性
padding的属性就是一个内边距，指的是Container边缘和child内容的距离。

child: Container(
              child: Text(
                "Hello World",
                style: TextStyle(fontSize: 40.0,color: Colors.purple),
              ),
              alignment:Alignment.topLeft,
              width: 400.0,
              height: 500.0,
              color: Colors.blueAccent,
              padding: const EdgeInsets.all(20),
            ),

或者使用EdgeInsets.fromLTRB(left, top, right, bottom),可以为左上右下设置不同的数值：

 child: Container(
              child: Text(
                "Hello World",
                style: TextStyle(fontSize: 40.0,color: Colors.purple),
              ),
              alignment:Alignment.topLeft,
              width: 400.0,
              height: 500.0,
              color: Colors.blueAccent,
//              padding: const EdgeInsets.all(20),
            padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
            ),

margin属性
margin是外边距，指的是container和外部元素的距离。用法与padding相同：

child: Container(
              child: Text(
                "Hello World",
                style: TextStyle(fontSize: 40.0, color: Colors.purple),
              ),
              alignment: Alignment.topLeft,
              width: 400.0,
              height: 500.0,
              color: Colors.blueAccent,
//              padding: const EdgeInsets.all(20),
              padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
              margin: const EdgeInsets.all(20),
//            margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
            ),

decoration属性
decoration是 container 的修饰器，主要的功能是设置背景和边框。
需要注意的是，当使用decoration设置背景时，就不能使用color属性了。

child: Container(
              child: Text(
                "Hello World",
                style: TextStyle(fontSize: 40.0, color: Colors.purple),
              ),
              alignment: Alignment.topLeft,
              width: 400.0,
              height: 500.0,
//              color: Colors.blueAccent,
//              padding: const EdgeInsets.all(20),
              padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
              margin: const EdgeInsets.all(20),
//            margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
              decoration: BoxDecoration(color: Colors.amber,),
            ),

下面把背景色设置为渐变色，代码如下：

 child: Container(
             child: Text(
               "Hello World",
               style: TextStyle(fontSize: 40.0, color: Colors.purple),
             ),
             alignment: Alignment.topLeft,
             width: 400.0,
             height: 500.0,
//              color: Colors.blueAccent,
//              padding: const EdgeInsets.all(20),
             padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
             margin: const EdgeInsets.all(20),
//            margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
             decoration: BoxDecoration(
                 color: const Color(0xFF00FFFF),
//              color: Color.fromRGBO(0, 255, 255, 0.1)
                 gradient: LinearGradient(
                     colors: [Colors.blueAccent, Colors.amber, Colors.purpleAccent],
                     begin: Alignment.centerLeft,
                     end: Alignment.centerRight,
                     tileMode: TileMode.mirror,
                     stops: [0.1, 0.5, 0.8])
//              gradient: RadialGradient(colors: [Colors.blueAccent,Colors.amber,Colors.purple])
//              gradient: SweepGradient(colors: [Colors.blueAccent,Colors.amber,Colors.purple],
//              center: Alignment.centerLeft)
                 ),
           ),

设置边框
设置边框可以在decoration里设置border属性：

 child: Container(
             child: Text(
               "Hello World",
               style: TextStyle(fontSize: 40.0, color: Colors.purple),
             ),
             alignment: Alignment.topLeft,
             width: 400.0,
             height: 500.0,
//              color: Colors.blueAccent,
//              padding: const EdgeInsets.all(20),
             padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
             margin: const EdgeInsets.all(20),
//            margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
//                  color: const Color(0xFF00FFFF),
             decoration: BoxDecoration(
//              color: Color.fromRGBO(0, 255, 255, 0.1)
                 gradient: LinearGradient(
                     colors: [
                       Colors.blueAccent,
                       Colors.purpleAccent,
                       Colors.amber,
                     ],
                     begin: Alignment.centerLeft,
                     end: Alignment.centerRight,
                     tileMode: TileMode.mirror,
                     stops: [0.1, 0.5, 0.8]),
//              gradient: RadialGradient(colors: [Colors.blueAccent,Colors.amber,Colors.purple])
//              gradient: SweepGradient(colors: [Colors.blueAccent,Colors.amber,Colors.purple],
//              center: Alignment.centerLeft)
//                border: Border.all(width: 2.0, color: Colors.red),
                 border: Border(
                     left: BorderSide(color: Colors.red, width: 3.0),
                     top: BorderSide(color: Colors.black, width: 3.0),
                     right: BorderSide(color: Colors.green, width: 3.0),
                     bottom: BorderSide(color: Colors.deepPurpleAccent, width: 5.0),
                 )),
           ),

从代码中可以看出，设置边界可以用Border.all()，或者分别设置左上右下的边界。