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

官方文档地址

Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的<div>标签，每个页面或者说每个视图都离不开它。其实容器的作用就是方便我们进行布局的。

Alignment属性

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

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

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

alignment.png

我们从上图可以看到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),
            ),

padding_all.png

或者使用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,),
            ),

decoration.png

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

 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)
                  ),
            ),

gradient.jpg

设置边框

设置边框可以在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.jpg

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

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