排布方向为竖向的Flex布局,可容纳多个组件。其他属性全部一致,详见Flex。
相关组件
Column基本使用
<br />【children】 : 组件列表 【List<Widget>】<br />【mainAxisAlignment】 : 主轴对齐 【MainAxisAlignment】<br />【crossAxisAlignment】 : 交叉轴对齐 【CrossAxisAlignment】<br />【textBaseline】 : 文字基线 【TextBaseline】<br />【verticalDirection】 : 竖直方向 【VerticalDirection】<br />【mainAxisSize】 : 主轴尺寸 【MainAxisSize】<br />
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,
),
);
}