排布方向为竖向的Flex布局,可容纳多个组件。其他属性全部一致,详见Flex。
相关组件
Column基本使用
<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,
),
);
}