如何為多次使用的小部件分配唯一鍵（Flutter）

Widget OptionField(String a, String b, Key key, int s) {
return AnimatedContainer(
    key: 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: (s == 1)
            ? Colors.green
            : (s == 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),
        ),
      ]),
    ));

這是在串列視圖中多次呼叫的小部件

Expanded(
                child: Column(
                  children: [
                    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;
                              });

                              ca  ;
                            } else {
                              setState(() {
                                isCorrect = 2;
                              });
                            }

                            if (questionCounter == questionMaxLength - 1) {
                              openDialog('Quiz Completed!',
                                  'Click on the Submit button below to see the Result');
                            } else {
                              Timer(
                                  const Duration(seconds: 2),
                                  () => setState(() {
                                        questionCounter  ;
                                        isCorrect = 0;
                                        // optionColor = Colors.white;
                                      }));
                            }
                          },
                          child: OptionField(
                              option[index],
                              widget.QandAnsList[questionCounter]
                                  .Answers[index],
                              UniqueKey(),
                              isCorrect),
                        );
                      },
                    )
                  ],
                ),
              )

這是我為小部件分配唯一鍵的串列視圖代碼。基本上，我想要根據正確或錯誤的答案更改特定小部件的顏色，但實際情況是它改變了所有小部件的顏色，盡管為它們分配了唯一的鍵。

uj5u.com熱心網友回復：

setState() 方法重建狀態，或者換句話說，它呼叫 Widget build(ctx) 方法，因此您的串列視圖每次都被構建。而是嘗試為每個問題分配一個狀態，然后更改特定問題的狀態以顯示該特定問題的真/假

uj5u.com熱心網友回復：

嘗試洗掉全域isCorrect變數，然后在 itembuilder 中定義一個。

itemBuilder: (context, index) {
    int isCorrect = 2;

其余代碼將相同。

標籤：扑钥匙

上一篇：VisualStudioCode中未選擇FlutterSDK

下一篇：我是新來的，我不斷收到這個錯誤