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


屬性如下:

Name Type Description
children List The widgets below this widget in the tree.
crossAxisAlignment CrossAxisAlignment How the children should be placed along the cross axis.
direction Axis The direction to use as the main axis.
hashCode int The hash code for this object.
key Key Controls how one widget replaces another widget in the tree.
mainAxisAlignment MainAxisAlignment How the children should be placed along the main axis.
mainAxisSize MainAxisSize How much space should be occupied in the main axis.
runtimeType Type A representation of the runtime type of the object.
textBaseline TextBaseline If aligning items according to their baseline, which baseline to use.
textDirection TextDirection Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.
verticalDirection VerticalDirection Determines the order to lay children out vertically and how to interpret start and end in the vertical direction.


方法如下:

Name Return Type Description
createElement() MultiChildRenderObjectElement RenderObjectWidgets always inflate to a RenderObjectElement subclass.
createRenderObject(BuildContext context) RenderFlex Creates an instance of the RenderObject class that this RenderObjectWidget represents, using the configuration described by this RenderObjectWidget.
debugDescribeChildren() List Returns a list of DiagnosticsNode objects describing this node’s children.
debugFillProperties(DiagnosticPropertiesBuilder description) void
didUnmountRenderObject(RenderObject renderObject) void A 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) TextDirection The value to pass to RenderFlex.textDirection.
noSuchMethod(Invocation invocation) dynamic Invoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode Returns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a one-line detailed description of the object.
toStringShort() String A short, textual description of this widget.
updateRenderObject(BuildContext context, RenderFlex renderObject) void Copies 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 屬性即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
)
],
)
),
);
}