三、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))