Flutter从入门到跑路 ------GridView列表组件（三）

GridView

类似iOS UICollectionView

1、可以通过 GridView.count 实现网格布局
2、通过 GridView.builder 实现网格布局

名称	类型	说明
scrollDirection	Axis	列表方向
padding	EdgeInsetsGeometry	滚动方法
resolve	bool	组件反向排序
crossAxisSpacing	double	水平子 Widget 之间间距
mainAxisSpacing	double	垂直子 Widget 之间间距
crossAxisCount	int	一行的 Widget 数量
childAspectRatio	double	子 Widget 宽高比例
children		Widget[ ]
gridDelegate	SliverGridDelegateWithFix edCrossAxisCount（常用） SliverGridDelegateWithMax CrossAxisExtent	控制布局主要用在 GridView.builder 里面

class  LayoutDemos extends StatelessWidget {

  List<Widget> _getListData(){
    var tempList = listData.map((value){
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(height: 15),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 20
              ),
            ),
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Color.fromARGB(233, 233, 233, 1),
            width: 1
          )
        ),
      );
    });
    return tempList.toList();
    
  }


  @override
  Widget build(BuildContext context) {
    
    return GridView.count( 
      crossAxisCount: 2,
      mainAxisSpacing: 20.0,
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 20.0,
      //childAspectRatio: 0.5,// 宽度和高度的比例
      children:this._getListData(),
    );
  }
  
}