我想更改 Listview 中选定索引的颜色，但所有索引颜色都在更新答案

【问题标题】：I want to change the color of selected index inside Listview but all indexes colors are being updated我想更改 Listview 中选定索引的颜色，但所有索引颜色都在更新
【发布时间】：2022-12-01 17:10:10
【问题描述】：

我正在创建一个测验应用程序，点击索引后，它的颜色会根据答案发生变化。当我选择一个索引时，ListView 中的所有索引都会改变颜色。

这是我的列表视图的代码：

ListView.separated(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: 4,
                    separatorBuilder: (context, index) {
                      return SizedBox(
                        height: 7,
                      );
                    },
                    itemBuilder: (context, index) {
                      return InkWell(
                        onTap: () {
                          if (widget.QandAnsList[questionCounter]
                                  .Answers[index] ==
                              widget
                                  .QandAnsList[questionCounter].CorrectAnswer) {
                            setState(() {
                              isCorrect = 1;
                            });
                          } else {
                            setState(() {
                              isCorrect = 2;
                            });
                          }
                        },
                        child: OptionField(
                          option[index],
                          widget.QandAnsList[questionCounter].Answers[index],
                          ValueKey(index.toString()),
                          isCorrect,
                        ),
                      );
                    },
                  )),

这是 OptionField 小部件的代码：


  Widget OptionField(
    String a,
    String b,
    ValueKey key,
    int isCorrect,
  ) {
    return AnimatedContainer(
        key: ValueKey(key),
        duration: Duration(seconds: 1),
        height: MediaQuery.of(context).size.height * 0.07,
        width: MediaQuery.of(context).size.width * 0.9,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(28),
            color: (isCorrect == 1)
                ? Colors.green
                : (isCorrect == 2)
                    ? Colors.red
                    : Colors.white),
        child: Padding(
          padding: EdgeInsets.fromLTRB(8, 0, 8, 0),
          child: Row(children: [
            Container(
              alignment: Alignment.center,
              height: MediaQuery.of(context).size.height * 0.055,
              width: MediaQuery.of(context).size.height * 0.055,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  color: Color.fromARGB(255, 255, 123, 0)),
              child: Text(
                '$a',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.bold),
              ),
            ),
            SizedBox(
              width: 15,
            ),
            Text(
              '$b',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 16,
                  fontWeight: FontWeight.bold),
            ),
          ]),
        ));
  }

我尽我所能，但到目前为止没有任何效果。我仍然无法更改所选索引的颜色

【问题讨论】：

标签： flutter dart mobile

【解决方案1】：

您可以引入另一个变量来指示哪个索引被点击。例如

int tappedIndex = -1;

然后将您的项目生成器更改为

                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      if (widget.QandAnsList[questionCounter]
                              .Answers[index] ==
                          widget
                              .QandAnsList[questionCounter].CorrectAnswer) {
                        setState(() {
                          tappedIndex = index;
                          isCorrect = 1;
                        });
                      } else {
                        setState(() {
                          tappedIndex = index;
                          isCorrect = 2;
                        });
                      }
                    },
                    child: OptionField(
                      option[index],
                      widget.QandAnsList[questionCounter].Answers[index],
                      ValueKey(index.toString()),
                      tappedIndex == index ? isCorrect : 0,
                    ),
                  );
                },

【讨论】：