Flutter定位装饰组件-Container

定位装饰组件-Container

Container 是最常用的组件之一，它是单容器类组件，即仅能包含一个子组件，用于装饰和定位子组件，例如设置背景颜色、形状等。

最简单用法如下，代码如下：

Container(
    child: Text('你好，flutter'),
)

设置背景颜色，代码如下：

Container(
    color: Colors.blue,
    child: Text('你好，flutter'),
)

设置对齐方式为居中，代码如下：

Container(
    color: Colors.blue,
    child: Text('你好，flutter'),
    // Alignment(-.5,.5)  其坐标系与iOS中Storyboard中的坐标系一致
    // 屏幕中心为(0, 0), x轴左右两侧分别为-1和1，y轴上下两侧分别为-1和1
    alignment: Alignment.center, 
    width: 200,
    height: 100
)

设置内边距(padding)和外边距(margin)，代码如下：

Container(
    color: Colors.blue,
    child: Text('你好，flutter'),
    padding: const EdgeInsets.all(20),
    margin: const EdgeInsets.fromLTRB(50, 0, 0, 0),
    // Alignment(-.5,.5)  其坐标系与iOS中Storyboard中的坐标系一致
    // 屏幕中心为(0, 0), x轴左右两侧分别为-1和1，y轴上下两侧分别为-1和1
    // alignment: Alignment.center, 
    // width: 200,
    // height: 100
)

decoration属性设置子组件的背景颜色、边框、圆角等，代码如下：

Container(
    child: const Text("你好,flutter"),
    // color: Colors.blue,
    decoration: BoxDecoration(
        // 设置背景颜色，设置decoration以后Container不允许再有color
        color: Colors.blue,
        // 设置圆角
        borderRadius: const BorderRadius.all(Radius.circular(50)),
        // 设置边框
        border: Border.all(color: Colors.red, width: 3),
    ),
    // 设置内边距
    padding: const EdgeInsets.all(20),
    // 设置外边距
    margin: const EdgeInsets.fromLTRB(50, 50, 0, 0),
    // 对齐方式
    alignment: Alignment.center,
    // width: 200,
    // height: 100,
    // 通过constraints属性设置最大/小宽、高来确定大小，如果不设置，默认最小宽高是0，最大宽高是无限大（double.infinity）
    constraints: const BoxConstraints(
        maxHeight: 100, 
        maxWidth: 200, 
        minHeight: 50, 
        minWidth: 50
    ),
    // 参数是弧度而不是角度，以左上角为圆点绕z轴旋转(Matrix4.translation：平移)
    transform: Matrix4.rotationZ(0.5),
)

创建圆角图片和圆形图片，代码如下：

Container(
    width: 200,
    height: 200,
    margin: const EdgeInsets.all(50),
    decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(100)),
        border: Border.all(color: Colors.red, width: 3),
        image: const DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage('https://mmbiz.qpic.cn/mmbiz_png/60G7GT1xMSqiaNqQIbIr4e9XVL0VT4vqibVIibCYPabwZeOaXzEPIeOp52ib8ibxJZc8sllZdExAewloRQTz9AIDU2A/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1')
        )
    )
);