Flutter Container容器组件介紹

一、Container组件容器布局介绍：

    1）、Container 在Flutter里大量使用，一个容器组件，必掌握组件之一，可以理解是html中的div;官方给出的简介，是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。

二、继承关系

Object>Diagnosticable>DiagnosticableTree>Widget>StatelessWidget>Container

从继承关系可以看出，Container是一个StatelessWidget。Container并不是一个最基础的widget，它是由一系列的基础widget组合而成。

三、构造方法中属性说明：

Container({
    Key key,
    this.alignment,  // 内容对齐
    this.padding,    // 内边距
    this.color,    // 背景色
    this.decoration, // 背景装饰 
    this.foregroundDecoration, // 前景装饰
    double width,    //容器的宽度
    double height,  //容器的高度
    BoxConstraints constraints,//容器大小的限制条件
    this.margin,    //外边距
    this.transform, //变换 一些旋转、移动之类的操作
    this.child,    // 子组件
    this.clipBehavior = Clip.none,
  })

四、属性介绍

    1、alignment:  topCenter：顶部居中对齐

                            topLeft：顶部左对齐

                            topRight：顶部右对齐

                            center：水平垂直居中对齐

                            centerLeft：垂直居中水平居左对齐

                            centerRight：垂直居中水平居右对齐

                            bottomCenter底部居中对齐

                            bottomLeft：底部居左对齐

                            bottomRight：底部居右对齐

    2、padding: 内边距

    3、margin: 外边距

    4、color：容器背景色

    5、foregroundDecoration：前景装饰

    6、constraints：容器大小的限制条件

    7、transform：Container 容器进行一些旋转、移动之类的操作

    8、width: 容器宽度

    9、height: 容器高度

    10、decoration：装饰   BoxDecoration类型

    针对 decoration 属性简单使用说明,以下介绍BoxDecoration的属性：

 const BoxDecoration({
    this.color, //颜色
    this.image, //图片
    this.border, //边框
    this.borderRadius, //边框圆角度
    this.boxShadow,    //阴影  可以多色混合
    this.gradient,    //渐变
    this.backgroundBlendMode,//背景
    this.shape = BoxShape.rectangle,//容器形状，BoxShape.rectangle  矩形；BoxShape.circle 圆形
  })

注意事项： 属性 decoration 和color 并排使用，decoration 属性存在，则color 属性无效并报错，即使用BoxDecoration中color属性；

gradient  >  image >  color    就是说 他们同时使用时 会优先显示gradient定义内容；shape不能同borderRadius一起使用  冲突，编译错误

五、代码示例：

import 'package:flutter/material.dart';

class ContainerPage extends StatefulWidget {
  ContainerPage({Key key}) : super(key: key);

  @override
  _ContainerPageState createState() => _ContainerPageState();
}

class _ContainerPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Container 例子"),
      ),
      body: Container(
        alignment: Alignment.center, // 容器内容居中
        margin: EdgeInsets.only(top: 20, left: 20),
        decoration: BoxDecoration(
          border: Border.all(width: 1, color: Colors.red), // 容器边框线为1，颜色为 红色
          color: Colors.yellow, // 背景色
          borderRadius: BorderRadius.all(Radius.circular(10)), // 边框圆角度
          boxShadow: [
            // 阴影 可以多色混合
            BoxShadow(
              color: Colors.green,
              blurRadius: 10.0,
            ),
          ],
          //背景渐变 可以多色渐变
          gradient: LinearGradient(colors: [Colors.white, Colors.yellow]),
        ),
        height: 400,
        width: 400,
        // color: Colors.yellow,  // 注：如果 decoration 存在则外面color 无效
        child: Text("Container实例"),
      ),
    );
  }
}

效果图