如何使用 StaggeredGridView 为每个图像创建不同的标题？

Question

在每张图片下，我希望 caption/card 说些不同的东西。

我怎样才能做到这一点？

我看到有人在他们的字符串中添加 ['url', "Some text"], 让文字覆盖图像，但我现在找不到它，我也无法让它工作。

这就是我设法做到的...

class Water extends StatefulWidget {
  const Water({Key key}) : super(key: key);

  @override
  _WaterState createState() => _WaterState();
}

class _WaterState extends State<Water> {

  List<String> imageList = [
        'https://i.pinimg.com/564x/bf/49/c6/bf49c6b37ab4be93bb77895ab777cee1.jpg',
        'https://i.pinimg.com/564x/4e/4e/72/4e4e72a411e829ee47dd3e3c96450b1a.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
                child: Text(
              'Water',
              style: TextStyle(
                  fontSize: 30,
                  color: Colors.blue),
            )),
          ],
        ),
        AnimatedContainer(
          duration: Duration(milliseconds: 500),
          width: Profile.width,
          child: Expanded(
            child: Container(
              child: StaggeredGridView.countBuilder(
                shrinkWrap: true,
                primary: false,
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 12,
                itemCount: imageList.length,
                itemBuilder: (context, index) {
                  return Card(
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.zero,
                      ),
                      child: Column(
                        children: [
                          FadeInImage.memoryNetwork(
                              placeholder: kTransparentImage,
                              image: imageList[index],
                              fit: BoxFit.cover),
                          Text(
                            'Some Text',
                          ),
                        ],
                      ),
                  );
                },
                staggeredTileBuilder: (index) {
                  return StaggeredTile.fit(1);

Answer 1

定义模型

class ImageItemModel{
  String imagePath;
  String title;
  ImageItemModel(this.imagePath, this.title)
  ///other things you want.
}

并像下面这样使用它

  List<ImageItemModel> list = [
       ImageItemModel("Url0","title0"),
       ImageItemModel("Url1","title1"),
       ImageItemModel("Url2","title2"),
  ];

您可以像这样访问每个项目

print(list[1].title) /// prints title1

因此您的这部分代码将像这样更改

  FadeInImage.memoryNetwork(
    placeholder: kTransparentImage,
    image: list[index].imagePath,
    fit: BoxFit.cover),
  Text(
    list[index].title,
   )

如何使用 StaggeredGridView 为每个图像创建不同的标题？

How can I create different captions for each image using StaggeredGridView?

dart

staggered-gridview

flutter