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

Question

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

    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 作为最后一项，它将用于添加另一个数据。我该怎么做？

Answer 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(),
        );
      },
    );
  }
}

希望对您有所帮助。

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

Flutter gridview with fake item for adding data

flutter

flutter-provider

flutter-gridview