排布方向为竖向的Flex布局,可容纳多个组件。其他属性全部一致,详见Flex。

相关组件

Flex Row

Column基本使用

  1. <br />【children】 : 组件列表 【List<Widget><br />【mainAxisAlignment】 : 主轴对齐 【MainAxisAlignment】<br />【crossAxisAlignment】 : 交叉轴对齐 【CrossAxisAlignment】<br />【textBaseline】 : 文字基线 【TextBaseline】<br />【verticalDirection】 : 竖直方向 【VerticalDirection】<br />【mainAxisSize】 : 主轴尺寸 【MainAxisSize】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589509480949-91d53bc5-5687-4e53-8a87-18ab3eb1735b.png#align=left&display=inline&height=188&margin=%5Bobject%20Object%5D&name=image.png&originHeight=188&originWidth=405&size=5974&status=done&style=none&width=405)
import 'package:flutter/material.dart';
class CustomColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildTitle(),
        _buildContent(context),
      ],
    );
  }

  Widget _buildTitle() {
    return Container(
        height: 70,
        color: Color(0x4484FFFF),
        child: Row(
          children: <Widget>[
            Padding(
              child: Icon(
                Icons.add_location,
                size: 30,
                color: Colors.pink,
              ),
              padding: EdgeInsets.only(left: 25, right: 20),
            ),
            Expanded(
              child: Text(
                "附近",
                style: TextStyle(fontSize: 18),
              ),
            ),
            Padding(
              child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),
              padding: EdgeInsets.only(right: 25),
            ),
          ],
        ));
  }

  Widget _buildContent(ctx) => Container(
        width: MediaQuery.of(ctx).size.width,
        color: Colors.orangeAccent,
        height: 100,
        child: Icon(
          Icons.android,
          size: 50,
          color: Colors.white,
        ),
      );
}