【Flutter学习】基本组件之容器组件Container

一，前言　 

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

二，基本组件 -- Container

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

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

• 继承关系
  

  Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

• 行为
  

  由于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,
      })
   */

• 参数详解
  

  • 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)

三，示例demo　　

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<CenterDemoPage>{
   @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 Widget