Flutter：Select 列表中的一個選項

Question

我有一個問題列表，每個問題里面都有一個答案列表。 當用戶選擇答案時，如果答案正確，我會將框變為綠色。 如果錯了，我把它變成紅色。 我在GetX package的幫助下做到了這一點。但是我遇到的問題是當用戶回答下一個問題時，前一個問題的答案框狀態也會更改為新狀態。

問題視頻鏈接

代碼：

  Widget question(List < CategoryQuestionModel > categoryQuestion) {
        for( int i = 0 ; i < 10; i++){
          cardSelectedController.isAnswered.insert(i, false);
        }
        return ListView.builder(
          shrinkWrap: true,
          itemCount: 10,
          padding: EdgeInsets.only(bottom: size * 5),
          physics: ScrollPhysics(),
          itemBuilder: (BuildContext context, j) {
            return ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: double.infinity,
              ),
              child: Container(
                margin: EdgeInsets.fromLTRB(15, 10, 15, 0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white,
                  boxShadow: < BoxShadow > [
                    BoxShadow(
                      color: Colors.grey[200],
                      blurRadius: 10.0,
                      offset: Offset(0.0, 0.5)
                    )
                  ],
                ),
                child: Padding(
                  padding: EdgeInsets.all(size * 4),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(
                              child: Text(
                                categoryQuestion[j].name,
                                textDirection: TextDirection.rtl,
                                style: TextStyle(
                                  height: 1.6,
                                  fontWeight: FontWeight.bold,
                                  color: Color(0xff3C526B)
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(height: size * 5),
                      Text(
                        categoryQuestion[j].contentText,
                        textAlign: TextAlign.right,
                        textDirection: TextDirection.rtl,
                        style: TextStyle(
                          height: 1.6,
                        ),
                      ),
                      SizedBox(height: size * 5),
                      ListView.builder(
                        shrinkWrap: true,
                        itemCount: categoryQuestion[j].answerlist.length,
                        padding: EdgeInsets.only(bottom: size * 5),
                        physics: ScrollPhysics(),
                        itemBuilder: (BuildContext context, i) {
                          return GestureDetector(
                            onTap: () {
                              correctAnswerIndex = categoryQuestion[j].answerlist.indexWhere((element) => element.corectanswer == true);
 selectedIndex = i 
                        cardSelectedController.checkAns(correctAnswerIndex, selectedIndex , j); 
                            },
                            child: GetBuilder < CardSelectedController > (
                              builder: (qnController) {
                                Color getTheRightColor() {
                                  if (qnController.isAnswered[j]) {
                                    if (i == qnController.correctAns) {
                                      return kGreenColor;
                                    } else if (i == qnController.selectedAns && qnController.selectedAns != qnController.correctAns) {
                                      return kRedColor;
                                    }
                                  }
                                  return kGrayColor;
                                }
    
                                return ConstrainedBox(
                                  constraints: BoxConstraints(
                                    maxHeight: double.infinity,
                                  ),
                                  child: Container(
                                    margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10),
                                      border: Border.all(color: getTheRightColor()),
                                      color: getTheRightColor() == kGrayColor ?
                                      Colors.transparent :
                                      getTheRightColor(),
                                    ),
                                    child: Padding(
                                      padding: EdgeInsets.all(size * 4),
                                      child: Center(
                                        child: Text(
                                          categoryQuestion[j].answerlist[i].answerText,
                                          style: TextStyle(
                                            height: 1.6
                                          ),
                                        ),
                                      ),
                                    ),
                                  )
                                );
                              }
                            ),
                          );
                        }
                      ),
                    ],
                  ),
                ),
              ),
            );
          }
        );
      }
    }
    
    
    class CardSelectedController extends GetxController{
    
      List<bool> _isAnswered = [];
      List<bool> get isAnswered => this._isAnswered;
    
      int _correctAns;
      int get correctAns => this._correctAns;
    
      int _selectedAns;
      int get selectedAns => this._selectedAns;
    
      void checkAns(int answerIndex, int selectedIndex , int j) {
        // because once user press any option then it will run
        _isAnswered[j] = true;
        _correctAns = answerIndex;
        _selectedAns = selectedIndex;
        update();
      }
    }

Answer 1

首先，注意你有 X 數量的問題，但你的 GetX class 只有 2 個值來正確識別並檢查它是否正確（_correctAns 和 _selectedAns）。 這意味着您正在用新值替換舊值，並且所有先前點擊的答案都遵循新值。 我建議將 _correctAns 和 _selectedAns 變成一個列表。

class CardSelectedController extends GetxController{

  List<bool> _isAnswered = [];
  List<bool> get isAnswered => this._isAnswered;

  List<int> _correctAns = [];
  int correctAns(int i) => this._correctAns[i];

  List<int> _selectedAns = [];
  int selectedAns(int i) => this._selectedAns[i];

  void checkAns(int answerIndex, int selectedIndex , int j) {
    // because once user press any option then it will run
    _isAnswered[j] = true;
    _correctAns[j] = answerIndex;
    _selectedAns[j] = selectedIndex;
    update();
  }
}