Flutter - Column class

Flutter 的 Column widget 可用來將子元件垂直放置。

其建構子如下：

Column({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List<Widget> children: const [] })

屬性如下：

NameTypeDescription
childrenListThe widgets below this widget in the tree.
crossAxisAlignmentCrossAxisAlignmentHow the children should be placed along the cross axis.
directionAxisThe direction to use as the main axis.
hashCodeintThe hash code for this object.
keyKeyControls how one widget replaces another widget in the tree.
mainAxisAlignmentMainAxisAlignmentHow the children should be placed along the main axis.
mainAxisSizeMainAxisSizeHow much space should be occupied in the main axis.
runtimeTypeTypeA representation of the runtime type of the object.
textBaselineTextBaselineIf aligning items according to their baseline, which baseline to use.
textDirectionTextDirectionDetermines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.
verticalDirectionVerticalDirectionDetermines the order to lay children out vertically and how to interpret start and end in the vertical direction.

方法如下：

NameReturn TypeDescription
createElement()MultiChildRenderObjectElementRenderObjectWidgets always inflate to a RenderObjectElement subclass.
createRenderObject(BuildContext context)RenderFlexCreates an instance of the RenderObject class that this RenderObjectWidget represents, using the configuration described by this RenderObjectWidget.
debugDescribeChildren()ListReturns a list of DiagnosticsNode objects describing this node’s children.
debugFillProperties(DiagnosticPropertiesBuilder description)void
didUnmountRenderObject(RenderObject renderObject)voidA render object previously associated with this widget has been removed from the tree. The given RenderObject will be of the same type as returned by this object’s createRenderObject.
getEffectiveTextDirection(BuildContext context)TextDirectionThe value to pass to RenderFlex.textDirection.
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.
updateRenderObject(BuildContext context, RenderFlex renderObject)voidCopies the configuration described by this RenderObjectWidget to the given RenderObject, which will be of the same type as returned by this object’s createRenderObject.

使用上只要將要垂直放置的元件用陣列的方式設置到 children 屬性即可。

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Container(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text('Hello, world!', textDirection: TextDirection.ltr),
            new Container(
              color: Colors.blue,
              width: 48.0,
              height: 48.0
            )
          ],
        )
      ),
  );
}

1.png

2.png