Flutter基础控件之Container

简单介绍：Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新颖的方式组合这些以及其他简单的控件。

先看一下一张效果图：

二，Container的职责

　　容器，一个常用的控件，由基本的绘制、位置和大小控件组成。负责创建矩形的可视元素，可以用BoxDecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制，另外，还可以在三维空间利用矩阵进行变换。

没有子控件的容器尽可能大，除非传入的大小约束是无限的，在这种情况下，它们尽可能小。有子控件的容器将自己的尺寸给他们的孩子。我们可以通过width、height和 constraints属性控制size。

1、继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

2、行为

由于Container结合了许多其他Widget，每个Widget都有自己的布局行为，因此Container的布局行为有点复杂。

依次是：

1、采用alignment

2、以child调整自身大小

3、采用了width，height和constraints

4、扩大以适应父Widget 5.要尽可能小

具体情况来说：

1·、如果Container没有子Widget，没有height，没有width，没有constraints，并且父窗口提供无限制约束，则Container尝试尽可能小。

2、 如果Container没有子Widget，没有alignment，而是一个height，width或 constraints提供，Container试图给出这些限制和父Widget的约束相结合，以尽可能小。

3、如果Container没有子Widget，没有height，没有width，没有constraints，没有alignment，但是父窗口提供了有界约束，那么Container会扩展以适应父窗口提供 的约束。

4、如果Container具有alignment，并且父窗口提供无限制约束，则constraints会尝试围绕子Widget的alignment自身大小。

5、如果Container具有alignment，并且父窗口提供有界约束，则constraints会尝试展开以适合父窗口，然后根据alignment将子项置于其自身内。

6、 Container具有子Widget，但没有height，没有width，没有constraints，没有alignment，将父级constraints传递给子级，自身调整大小。

构造方法讲解

Container({
    Key key,
    this.alignment,//控制child的对齐方式
    this.padding, //设置内边距
    Color color, //设置背景颜色
    Decoration decoration,//绘制在child下层的装饰，不能与color同时使用
    this.foregroundDecoration,//绘制在child上层的装饰
    double width, //宽
    double height, //高
    BoxConstraints constraints,添加到child上额外的约束条件
    this.margin,//外边距
    this.transform,//设置container的变换矩阵，类型为Matrix4
    this.child, //子组件
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'）

/**
    const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,//border四周添加阴影效果
    this.gradient,//装饰器的过度效果，比如可以用来给组件添加一个蒙层
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
    })
 */

 

 

Flutter中设置Container宽高可直接通过width和height属性来设置：如下

Container( 
 width: 100, 
 height: 100, 
 color: Colors.red,  
child: Text('Container固定宽高'),)

　

有时在不确定宽高的情况下需要设置Container的最大或最小宽高，可以通过Container的constraints属性来设置，如下：

设置container最小宽高

Container( 
 constraints: BoxConstraints(  
  minWidth: 180,  
  minHeight: 50, 
 ), 
 color:
 Colors.red, 
 child: Text('Container设置最小宽高'),)

　　

设置Container最大宽高，此时超出部分溢出

Container( 
 constraints: BoxConstraints(  
  maxWidth: 50,  
  maxHeight: 50, 
 ), 
 color: Colors.red, 
 child: Text('Container设置最大宽高'),)

　　

 

alignment（这个属性是针对容器中的child的对其方式）

topCenter：顶部居中对齐

topLeft：顶部左对齐

topRight：顶部右对齐

center：水平垂直居中对齐

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

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

bottomCenter底部居中对齐

bottomLeft：底部居左对齐

bottomRight：底部居右对齐　　

decoration（容器的修饰器，用于背景或者border）

如果在decoration中用了color，就把容器中设置的color去掉，不要重复设置color，设置的边框样式是让四条边框的宽度为8px，颜色为黑色

参数详解

margin（margin属性是表示Container与外部其他组件的距离）

padding（指Container边缘与Child之间的距离）

padding: EdgeInsets.all(20.0),

transform（可以根据自己的需要调整旋转的角度）

transform: Matrix4.rotationZ(0.2)

示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container组件demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new CenterDemoPage() ,
    );
  }
}

class CenterDemoPage extends StatefulWidget{
   @override
   createState() => new CenterDemoPageState();
}

class CenterDemoPageState extends State{
   @override
   Widget build(BuildContext context) {
    return new Scaffold(
       appBar: new AppBar(
         title: new Text('Container Widget Demo'),
       ),
       body:_buildDemo() ,
    );
  }

  Widget _buildDemo(){
    return new Center(
      child: Container(
        child: new Text('Hello Wolrd !'),
        alignment: Alignment.center, //设置对齐方式
        width: 300, //宽
        height:300, //高
        // color: Colors.redAccent,
        //设置边框
        decoration: new BoxDecoration(
          gradient: new LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment(0.8, 0),
            colors: [const Color(0xFFFFFFEE), const Color(0xFF999999)]
          ),
          color: Colors.blue,
          border: Border.all(
            color: Colors.black,
            width: 8.0,
          ),
        ),
        //内边距
        padding: EdgeInsets.all(20.0),
        margin: EdgeInsets.all(10.0),
        //旋转
        transform: Matrix4.rotationZ(0.4),
      ),
    );
  }
}

最后总结：

容器组件（Container）可以理解为在Android中的RelativeLayout或LinearLayout等，在其中你可以放置你想布局的元素控件，从而形成最终你想要的页面布局。当然Flutter中的容器组件作为一个"容器"，肯定会有一些给我们提供一些属性来约束我们容器内的组件，下面介绍一下容器组件（Container）的一些常用属性及描述：

属性名	类型	说明
key	Key	Container唯一标识符，用于查找更新
alignment	AlignmentGeometry	控制child的对其方式，如果Container或者Container父节点尺寸大于Child的尺寸，这个属性设置会生效，有很多种对齐方式
padding	EdgeInsetsGeometry	Decoration内部的空白区域，如果有child的话，child位于padding内部
color	Color	用来设置Container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果
decoration	Decoration	绘制在child后面的装饰，设置了Decoration的话，就不能设置color属性，否则会报错，此时应该在Decoration中进行颜色的设置
foregroundDecoration	Decoration	绘制在child前面的装饰
width	double	Container的宽度，设置为double.infinity可以强制在宽度上撑满
height	double	Container的高度，设置为double.infinity可以强制在高度上撑满
constraints	BoxConstraints	添加到child上额外的约束条件
margin	EdgeInsetsGeometry	围绕在Decoration和child之外的空白区域，不属于内容区域
transform	Matrix4	设置Container的变换矩阵，类型为Matrix4
child	Widget	Container中的内容Widget