如何为flutter中的每个索引分配每个值答案

【问题标题】：How to assign each value for each index in flutter如何为flutter中的每个索引分配每个值
【发布时间】：2021-09-03 17:49:33
【问题描述】：

我正在制作一个显示一行图像的应用程序（所有这些图像都使用 0-4 的循环/索引）。代码：

for (int i = 0; i <= 3; i++)
     child: Card(
                          semanticContainer: true,
                          clipBehavior: Clip.antiAliasWithSaveLayer,
                          child: Container(
                            width: 300,
                            height: 300,
                            color: Colors.accents[i],
                            child: Image.asset(
                              "assets/farCryImages/$i.jpg",
                              alignment: Alignment.center,
                              fit: BoxFit.cover,
                            ),
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                          elevation: 5,
                        ),

我想向用户显示他们的名字的弹出窗口（即：第一张图片：a，第二张图片：b 等..）。但我似乎找不到方法，我需要帮助。

我试过了，但它不会工作：

for (int i = 0; i <= 3; i++)
                    Padding(
                      padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
                      child: GestureDetector(
                        onLongPress: () => showDialog(
                          context: context,
                          builder: (BuildContext context) => AlertDialog(
                            title: Text("$i"),
                          ),
                        ),

我想将 $i 更改为特定照片的特定名称。

完整代码：

child: Row(
                children: [
                  for (int i = 0; i <= 3; i++)
                    Padding(
                      padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
                      child: GestureDetector(
                        onLongPress: () => showDialog(
                          context: context,
                          builder: (BuildContext context) => AlertDialog(
                            title: Text("$i"),
                          ),
                        ),
                        child: Card(
                          semanticContainer: true,
                          clipBehavior: Clip.antiAliasWithSaveLayer,
                          child: Container(
                            width: 300,
                            height: 300,
                            color: Colors.accents[i],
                            child: Image.asset(
                              "assets/farCryImages/$i.jpg",
                              alignment: Alignment.center,
                              fit: BoxFit.cover,
                            ),
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                          elevation: 5,
                        ),
                      ),
                    )
                ],
              ),

感谢任何帮助!!!

【问题讨论】：

标签： ios flutter dart flutter-layout

【解决方案1】：

我不确定你的问题。但是，如果您想遍历图像的不同名称，则应为它们的名称使用字符串列表：

List<String> imageName = [
    "first image",
    "second image", 
    // and so on
  ]

然后，在你的循环中调用它们：

     onLongPress: () => showDialog(
                          context: context,
                          builder: (BuildContext context) => AlertDialog(
                            title: Text(imageName[i]),
                          ),
                        ),

另外，为了更好的解决方案，我建议为每个图像使用一个类：

class ImageItem{
  String name;
  String path;
  // and other parameters like id

  // and a constructor
}

然后创建这个类的列表并在你的循环中使用它们。

【讨论】：

【解决方案2】：

首先，为感兴趣的对象创建一个 Stateful Widget 类，如下所示：

class CardObject extends StatefulWidget {
  final String title;
  final String image;
  final Color color;

  const CardObject(this.title, this.image, this.color);

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

class _CardObjectState extends State<CardObject> {
  


  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: GestureDetector(
          onLongPress: () => showDialog(
            context: context,
            builder: (BuildContext context) => AlertDialog(
              title: Text(widget.title),
            ),
          ),
          child: Card(
            semanticContainer: true,
            clipBehavior: Clip.antiAliasWithSaveLayer,
            child: Container(
              width: 300,
              height: 300,
              color: widget.color,
              child: Image.asset(
                "assets/farCryImages/${widget.image}",
                alignment: Alignment.center,
                fit: BoxFit.cover,
              ),
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            elevation: 5,
          ),
        ),
      ),
    );
  }
}

然后创建一个列表来保存 CardObject：

//List of CardObjects
  final List<CardObject> cardObjects = [
    CardObject('title 1', 'image1.jpg', Colors.red),
    CardObject('title 2', 'image2.jpg', Colors.blue),
    CardObject('title 3', 'image3.jpg', Colors.orange),
    CardObject('title 4', 'image4.jpg', Colors.grey),
  ];

像这样显示你的对象：

@override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: cardObjects,
      ),
    );
  }

【讨论】：