gridview的实现方法

gridview存在两种实现方法：

• GridView.count（）
• GridView.build（）

第一种方法

• GridView.count（）

 var temp = listData.map((value){
    return Container(
      margin: EdgeInsets.all(5.0),
      decoration: BoxDecoration(
          border: Border.all(
            color: Color.fromRGBO(233, 233, 233, 0.8),
            width: 1.0
          )
      ),
      child: Column(
        children: [
            Image.network(value['imageUrl']),
            Text(
                value['title'],
                overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 10
              ),
            ),
            // Text(value['author']),
        ],
      )
    );
  });

@override
  Widget build(BuildContext context) {
     TODO: implement build
     return GridView.count(
       crossAxisCount: 3,
       children: temp.toList(),
     );

第二种方法：

class HomeContent extends StatelessWidget {
  Widget _getData(context,index){
      return Container(
        margin: EdgeInsets.all(5.0),
        decoration: BoxDecoration(
            border: Border.all(
              color: Color.fromRGBO(233, 233, 233, 0.8),
              width: 1.0
            )
        ),
        child: Column(
          children: [
              Image.network(listData[index]['imageUrl']),
            Text(
                listData[index]['author'],
                overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
            )
          ],
        )
      );
  }


@override
  Widget build(BuildContext context) {
    return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing : 5.0,
          childAspectRatio :0.7,
        ),
        itemBuilder: _getData,
      itemCount: listData.length,
    );
  }