1、在flutter中Container类似于html中的div或者android中的layout布局，是作为一个控件的容器存在的，如填充、背景色、边框、边距等属性只有Container或者Container的子widget才用。
在Container中添加Row或者Column可以以行或者列的方式处理布局方式。
2、使用Expanded来包围widget配合flex属性可以实现控件按照权重布
3、布局方式Row和Column的对其方式使用mainAxisAlignment和crossAxisAlignment，分别代表主轴方向上的对齐方式和与主轴垂直的方向上的对齐方式。
4、 mainAxisSize使得容器widget中的字控件聚集在一起，而不会散开布局
5、边距和边框
new Container(
//边框
decoration: new BoxDecoration(
border: new Border.all(width: 10.0, color: Colors.black38),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
//边距
margin: const EdgeInsets.all(4.0),
child: new Image.asset('images/pic1.jpg'),
),
6、GridView
渲染网格数据的方式
// The images are saved with names pic1.jpg, pic2.jpg...pic30.jpg.
// The List.generate constructor allows an easy way to create
// a list when objects have a predictable naming pattern.
List<Container> _buildGridTileList(int count) {
return new List<Container>.generate(
count,
(int index) =>
new Container(child: new Image.asset('images/pic${index+1}.jpg')));}
Widget buildGrid() {
return new GridView.extent(
maxCrossAxisExtent: 150.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _buildGridTileList(30));}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: buildGrid(),
),
);
}}
7、listView
渲染列表数据时使用
使用方法：
List<Widget> list = <Widget>[
new ListTile(
title: new Text('CineArts at the Empire',
style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: new Text('85 W Portal Ave'),
leading: new Icon(
Icons.theaters,
color: Colors.blue[500],
),
),
new ListTile(
title: new Text('The Castro Theater',
style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: new Text('429 Castro St'),
leading: new Icon(
Icons.theaters,
color: Colors.blue[500],
),
),
// ...
// See the rest of the column defined on GitHub:
// https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/listview/main.dart];
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
// ...
body: new Center(
child: new ListView(
children: list,
),
),
);
}}
