Flutter - Container class

Flutter 的 Container widget 是能用來繪製、設定位置/尺寸的容器 widget。

其建構子如下：

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

屬性如下：

NameTypeDescription
alignmentAlignmentGeometryAlign the child within the container.
childWidgetThe child contained by the container.
constraintsBoxConstraintsAdditional constraints to apply to the child.
decorationDecorationThe decoration to paint behind the child.
foregroundDecorationDecorationThe decoration to paint in front of the child.
marginEdgeInsetsGeometryEmpty space to surround the decoration and child.
paddingEdgeInsetsGeometryEmpty space to inscribe inside the decoration. The child, if any, is placed inside this padding.
transformMatrix4The transformation matrix to apply before painting the container.
hashCodeintThe hash code for this object.
keyKeyControls how one widget replaces another widget in the tree.
runtimeTypeTypeA representation of the runtime type of the object.

方法如下：

NameReturn TypeDescription
build(BuildContext context)WidgetDescribes the part of the user interface represented by this widget.
debugFillProperties(DiagnosticPropertiesBuilder description)void
createElement()StatelessElementCreates a StatelessElement to manage this widget’s location in the tree.
debugDescribeChildren()ListReturns a list of DiagnosticsNode objects describing this node’s children.
noSuchMethod(Invocation invocation)dynamicInvoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style })DiagnosticsNodeReturns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a one-line detailed description of the object.
toStringShort()StringA short, textual description of this widget.

使用上可以設定 color 屬性變更顏色。

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Container(
      color: Colors.blue,
    ),
  );
}

1.png

2.png

可以設定 width 屬性變更寬度，設定 height 屬性變更高度。

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Container(
        color: Colors.blue,
        width: 48.0,
        height: 48.0,
      ),
    ),
  );
}

3.png

4.png

可以設定 child 屬性指定容器內的元件，設定 alignment 指定容器內的元件要怎麼排放，設定 transform 屬性指定容器要怎樣變形。

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Container(
        color: Colors.blue,
        child: new Container(
          color: Colors.yellow,
          margin: const EdgeInsets.all(10.0),
          alignment: Alignment.center,
          child: new Container(
            color: Colors.white,
            width: 48.0,
            height: 48.0,
            transform: new Matrix4.rotationZ(0.1),
          )
        )
      ),
  );
}

5.png

6.png