我如何在 flutter 中仅更改列表视图中的选定选项

Question

我正在尝试显示用户选择的答案。

在下面的代码中，我获取并显示了测验列表。我试图将用户所选选项的背景颜色更改为与其他颜色不同的颜色，但是当我执行代码时，所有测验都会受到影响。

请推荐一个简单易行的方法，因为我不是真正的flutter developer程序员，我只是在学习，并没有走得太远。

提前致谢


  Widget MyQuizzesCardUI(String question, String OptionID, String Option1, String Option2, String Option3, String Option4, String MyChoice, String Status, int index) {
    bool opt1 = false;
    bool opt2 = false;
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: Color(0xffefefef), width: 0.5)),
      child: Column(
        children: [
          Container(
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Container(
                      child: InkWell(
                        onTap: () {
                          opt1 = true;
                          opt2 = false;
                          setState(() {
                            opt1 = true;
                            opt2 = false;
                          });
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: opt1 ? Color(0xffa4c3ff) : Colors.white,
                            ),
                            child: Text(
                              "${Option1}",
                            ),
                          ),
                        ),
                      ),
                    ),
                    Container(
                      child: InkWell(
                        onTap: () {
                          opt1 = false;
                          opt2 = true;
                          setState(() {
                            opt1 = false;
                            opt2 = true;
                          });
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: opt2 ? Color(0xffa4c3ff) : Colors.white,
                            ),
                            child: Text(
                              "${Option2}",
                            ),
                          ),
                        ),
                      ),
                    ),
                  ]
              ))
        ],
      ),
    );
  }

Answer 1

它不会改变，因为当您调用 setState 时它会重新加载整个 class 所以它也会再次设置为初始值。

让我们像这样创建一个列表：

List<Map<String, Bool>> options = [
  {
    "opt1": false;
    "opt2": false;
  }
];

要填充列表，您可以像这样在 initState 中使用此代码：

@override
  void initState() {
    super.initState();

    for(int i = 0; i>questions.length; i++) {
      options.add({"opt1": false, "opt2": false}); 
    }

在您的小部件中，它的工作方式如下：

Widget MyQuizzesCardUI(String question, String OptionID, String Option1, String Option2, String Option3, String Option4, String MyChoice, String Status, int index) {
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: Color(0xffefefef), width: 0.5)),
      child: Column(
        children: [
          Container(
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Container(
                      child: InkWell(
                        onTap: () {
                          options[index]["opt1"] = true;
                          options[index]["opt2"] = false;
                          setState(() {
                            options[index]["opt1"] = true;
                            options[index]["opt2"] = false;
                          });
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: options[index]["opt1"] ? Color(0xffa4c3ff) : Colors.white,
                            ),
                            child: Text(
                              "${options[index]["opt1"]}",
                            ),
                          ),
                        ),
                      ),
                    ),
                    Container(
                      child: InkWell(
                        onTap: () {
                          options[index]["opt1"] = false;
                          options[index]["opt2"] = true;
                          setState(() {
                            options[index]["opt1"] = false;
                            options[index]["opt2"] = true;
                          });
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: options[index]["opt2"] ? Color(0xffa4c3ff) : Colors.white,
                            ),
                            child: Text(
                              "${options[index]["opt2"]}",
                            ),
                          ),
                        ),
                      ),
                    ),
                  ]
              ))
        ],
      ),

我如何在 flutter 中仅更改列表视图中的选定选项

How do i change only the chosen option in listview in flutter

flutter

dart

listview