带有用于添加数据的虚假项目的 Flutter gridview答案

【问题标题】：Flutter gridview with fake item for adding data带有用于添加数据的虚假项目的 Flutter gridview
【发布时间】：2020-05-23 22:57:14
【问题描述】：

假设我有一个这样的网格视图：

    class ImagesGrid extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        final size = MediaQuery.of(context).size;
        final imagesData = Provider.of<Pictures>(context);
        final images = imagesData.items;
        return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: size.width / size.height ,
          ),
          padding: const EdgeInsets.all(10.0),
          itemCount: images.length + 1,
          itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
            value: images[i],
            child: images.length == 0  ? Text('No images'):  ImageWidget(),
          ),
        );
      }
    }

现在，假设我希望在这个GridView 中添加一个FlatButton 作为最后一项，它将用于添加其他数据。我该怎么做？

【问题讨论】：

标签： flutter flutter-provider flutter-gridview

【解决方案1】：

class ImagesGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final imagesData = Provider.of<Pictures>(context);
    final images = imagesData.items;
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: size.width / size.height ,
      ),
      padding: const EdgeInsets.all(10.0),
      itemCount: images.length + 1,
      itemBuilder: (ctx, i) {
        if(i==images.length) return FlatButton( // Add child and onPressed params );
        return ChangeNotifierProvider.value(
            value: images[i],
            child: images.length == 0  ? Text('No images'):  ImageWidget(),
        );
      },
    );
  }
}

希望我能帮到你。

【讨论】：