Flutter开发：GrideView使用

最新推荐文章于 2024-09-08 08:22:30 发布

可乐猫哈

最新推荐文章于 2024-09-08 08:22:30 发布

阅读量860

点赞数

分类专栏： Flutter开发

本文链接：https://blog.csdn.net/qq_39027256/article/details/107299654

版权

Flutter开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了Flutter中的GrideView使用方法，包括通过GridView.builder和GridView.count两种方式创建网格视图。首先，通过在工程目录下创建模拟数据源，接着详细展示了如何在Main.dart文件中引入并利用这些数据构建动态的GrideView。

摘要由CSDN通过智能技术生成

模拟数据：

在工程目录下添加一个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<Widget> 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();
  }
}