【flutter】Container组件-蒲公英云

Container是flutter中广泛使用的容器类组件，在以下场景会用到Container：

设置宽高：flutter中大部分组件不能设置宽高，需要依赖容器。
添加背景颜色
添加背影图像
添加内外边距：padding和margin
添加边框
设置圆角
设置child对齐：居中、居左、居右、居上、居下或偏移
设置变换：旋转或变形

因此，Container是一个非常基础的组件，同时也是用途广泛的组件，熟悉它非常有必要。

布局特点

Container组件的大小取决于

如果设置的宽高不在constraints范围内，设置的宽高会无效；
如果它有child，它会尽可能小。如果不设置宽高和约束，相当于child的大小。如果设置了宽高和约束，以设置最小有效值为准；
如果它没有child，它会尽可能大。如果不设置宽度和约束，相当于parent的大小。如果设置了宽高和约束，以设置的最大有效值为准。

constraints是一个约束大小的属性，相当于一个size范围，使Container不会小于最小size，不会超过最大size。如果没有设置此属性，就是无限制：最小宽高是0，最大宽高是parent的宽高。

构造函数

Container(
    { Key key,
    AlignmentGeometry alignment,
    EdgeInsetsGeometry padding,
    Color color,
    Decoration decoration,
    Decoration foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    EdgeInsetsGeometry margin,
    Matrix4 transform,
    Widget child}
)

属性

alignment：child对齐的属性，可以设置居中、居左、居右、居上、居下等等。
alignment已经在我的另外一篇文章中详细说明：Flutter Stack组件
padding：内边距。width和height包含padding值。
color：背景颜色。
decoration：设置装饰，比如边框、圆角、背景图片等。不能给Container同时设置decoration和color属性，如果要同时设置，给decoration设置color就可以。
foregroundDecoration，设置前景装饰。
width：宽度。
height：高度。
constraints：大小范围约束，constraints有四个属性：minWidth、minHeight、maxWidth、maxHeight。
margin: 外边距。
transform：变换效果，比如翻转、旋转、变形等。
child：子组件，可以不设置。

示例一：约束、对齐与变换。

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.blue[600],
  alignment: Alignment.center,
  child: Text('Hello World',
    style: Theme.of(context)
        .textTheme
        .display1
        .copyWith(color: Colors.white)),
  transform: Matrix4.rotationZ(0.1),
)

运行效果：
在这里插入图片描述

示例二：给Container添加背景图片

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: new Container(
          constraints: new BoxConstraints.expand(width: 300,height: 300),
          decoration: new BoxDecoration(
            border: new Border.all(width: 2.0, color: Colors.red),
            color: Colors.grey,
            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
            image: new DecorationImage(
              image: new AssetImage('graphyics/face.jpg'),
            ),
          ),
          padding: const EdgeInsets.all(8.0),
          alignment: Alignment.center,
          child: new Text('Hello Container',style: TextStyle(color: Colors.red),),
        ))));

运行效果：
在这里插入图片描述

示例三：不设置宽高和约束，有child，size会尽可能小

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            child: Text("Hello,Container",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            color: Colors.red))));

运行效果：
在这里插入图片描述

示例四：不设置宽高和约束，没有child，size会尽可能大

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            color: Colors.green))));

运行效果：
在这里插入图片描述

示例五：宽高不在约束范围内会无效。

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            constraints: BoxConstraints(
                minWidth: 200, minHeight: 200, maxWidth: 400, maxHeight: 400),
            width: 20,
            height: 20,
            child: Text("Hello,Container",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            color: Colors.green))));

运行效果(绝色区域宽高是200)：
在这里插入图片描述

示例六：没有设置宽高但是设置了child，会尽可能小，不会小于child的size。

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            constraints: BoxConstraints(
                minWidth: 20, minHeight: 20, maxWidth: 400, maxHeight: 400),
            child: Text("Hello,Container",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            color: Colors.green))));

在这里插入图片描述

示例七：设置了child和宽高会尽可能小，以有效的最小值为准(minWidth或width)

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            constraints: BoxConstraints(
                minWidth: 10, minHeight: 10, maxWidth: 400, maxHeight: 400),
            width: 100,
            height: 100,
            child: Text("Hello,Container",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            color: Colors.green))));