数据很大时使用矩阵方式排列比较清晰。可以使用网格列表组件GridView实现布局。 两种方式： 1. 可以通过GridView.count实现 2. GridView.builder实现 ## 常用属性 * scrollDirection（Axis）：滚动方式 * padding（EdgeInsets）：内边距 * resolve（bool）：组件反向排序 * crossAxisSpacing（double）：水平子Widget之间的距离 * mainAxisSpacing（double）：垂直子Widget之间的间距 * childAspectRatio（int）：一行的Widget数量 * childAspectRatio（double）：子Widget宽高比例 * children[] * gridDelegate：控制布局主要用在GridView.builder里面（SliverGridDelegateWithFixedCrossAxisCount(常用)，SliverGridDelegateWithMaxCrossAxisExtend） ~~~ return GridView.count( crossAxisCount: 2, children: <Widget>[ Text("这是一个文本"), ], ); ~~~ GridView ~~~ class HomeContent extends StatelessWidget{ List<Widget> _getListData(){ List<Widget> list = new List(); for(var i = 0; i<20; i++){ list.add(Container( // 此时设置高度没有反应，高度根据里面元素决定的 height: 400.0, alignment: Alignment.center, child: Text( 'this is $i data', style: TextStyle(color: Colors.white,fontSize: 20), ), color: Colors.blue )); } return list; } @override Widget build(BuildContext context) { // TODO: implement build return GridView.count( padding: EdgeInsets.all(10),//和外围的上下左右的距离 crossAxisCount: 2, mainAxisSpacing: 6.0,//上下距离 crossAxisSpacing: 6.0,//左右距离 children: _getListData(), childAspectRatio: 0.7,//宽度和高度的比例 ); } } ~~~ 图片文字网格布局 GridView：//高度宽度会自适应 SizedBox：距离，可代替Container (height: 10), ~~~ class HomeContent extends StatelessWidget{ List<Widget> _getListData(){ var tempList = listData.map((value){ return Container( // 此时设置高度没有反应，高度根据里面元素决定的 alignment: Alignment.center, // listView会自适应高度或宽度，会平铺，而Column不会平铺，是多大就多大 child:Column( children: <Widget>[ Image.network(value["imageUrl"]), //距离，可代替Container SizedBox(height: 10), Text( value["title"], textAlign: TextAlign.center, style: TextStyle( fontSize: 16, ) ) ], ), decoration: BoxDecoration( border: Border.all( color: Color.fromRGBO(233, 233, 233, 0.9), width: 1 ) ), ); }); return tempList.toList(); //重点！！ } @override Widget build(BuildContext context) { // TODO: implement build return GridView.count( //高度宽度会自适应 padding: EdgeInsets.all(10),//和外围的上下左右的距离 crossAxisCount: 2, mainAxisSpacing: 6.0,//上下距离 crossAxisSpacing: 6.0,//左右距离 children: _getListData(), // childAspectRatio: 0.7,//宽度和高度的比例 ); } } ~~~ Builder实现网格（动态网格） ~~~ class HomeContent extends StatelessWidget{ Widget _getListData(context, index){ return Container( // 此时设置高度没有反应，高度根据里面元素决定的 alignment: Alignment.center, // listView会自适应高度或宽度，会平铺，而Column不会平铺，是多大就多大 child:Column( children: <Widget>[ Image.network(listData[index]["imageUrl"]), //距离，可代替Container SizedBox(height: 10), Text( listData[index]["title"], textAlign: TextAlign.center, style: TextStyle( fontSize: 16, ) ) ], ), decoration: BoxDecoration( border: Border.all( color: Color.fromRGBO(233, 233, 233, 0.9), width: 1 ) ), ); } @override Widget build(BuildContext context) { // TODO: implement build return GridView.builder( //高度宽度会自适应 itemCount: listData.length,//个数 itemBuilder: this._getListData, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // padding: EdgeInsets.all(10),//没有 crossAxisCount: 2, mainAxisSpacing: 6.0,//上下距离 crossAxisSpacing: 6.0,//左右距离 ), ); } } ~~~