Flutter 基础组件-列

本文章主要翻译于Widgets: Column

Column组件常用来显示垂直方向的子组件列表,与Row组件一样,该组件只会显示其可见范围内的子组件,并不会滚动显示其子组件

如下,可以创建一个具有三个子组件的Column组件

    body: new Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
        new Text('The first  line of text'),
        new Text('The second line of text'),
        new Text('The third  line of text'),
    ],
    ),

布局步骤

  1. 优先布局子组件为null以及不可伸缩组件(相对的可伸缩组件为:Expanded), 对于这些组件在垂直方向上没有做限制,在水平方向上限制为屏幕的大小 如果设定crossAxisAlignment:CrossAxisAlignment.stretch,在水平方向上将会匹配其宽度的最大值

  2. 然后将可伸缩的组件布局于剩下的空间,在这一步的时候,子组件还没有被布局

  3. 当布局可伸缩组件时,采用的规则与第一步的规则相似,只不过不会将已经布局的不可伸缩组件挤出屏幕之外,而是自身超出部分不可见

  4. Column的宽度,子组件在水平方向的显示永远是安全的,也就是说水平方向永远可见

  5. Column的高度取决于mainAxisSize属性

  6. 子组件的位置确定,取决于mainAxisAlignmentcrossAxisAlignment两个组件

属性

完整实例

import 'package:flutter/material.dart';

void main() => runApp(new HomePage());

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter Container'),
          ),
          body: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            // textBaseline: TextBaseline.ideographic,
            // textDirection: TextDirection.ltr,
            // verticalDirection: VerticalDirection.down,
            // mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              new Text(
                'The first line of text',
                style: new TextStyle(fontSize: 40.0),
              ),
              new Text(
                'The third line of text',
                style: new TextStyle(fontSize: 40.0),
              ),
              new Expanded(
                flex: 1,
                child: new Text(
                  'The second line of text,The second line of text,The second line of text,The second line of text',
                  style: new TextStyle(fontSize: 40.0),
                ),
              ),
            ],
          ),
        ));
  }
}

参考文件