Flutter开发：GrideView使用

 

模拟数据：

在工程目录下添加一个ListDart文件模拟存放我们的数据源，然后在Main.dart文件中引入该文件

List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      }      

  ];

使用 GridView.builder（）方式创建：

import 'res/listData.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 10),
      padding: EdgeInsets.all(10),
      itemBuilder: getItem,
    );
  }

  Widget getItem(context, index) {
    return Container(
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black12, width: 2)),
      child: Column(
        children: [
          Image.network(listData[index]['imageUrl']),
          SizedBox(
            height: 20,
          ),
          Text(listData[index]['title'])
        ],
      ),
    );
  }
}

使用 GridView.count（）方式创建：

 import 'res/listData.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(10),
      children: getItem(),
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
    );
  }

  List getItem() {
    var list = listData.map((e) {
      return Container(
        decoration:
            BoxDecoration(border: Border.all(color: Colors.black12, width: 2)),
        child: Column(
          children: [
            Image.network(e['imageUrl']),
            SizedBox(
              height: 20,
            ),
            Text(e['title'])
          ],
        ),
      );
    });
    return list.toList();
  }
}