选择列表行的按钮答案

【问题标题】：Select buttons of list rows选择列表行的按钮
【发布时间】：2021-09-02 20:19:25
【问题描述】：

有 MCQ 类型的设计我在这里有多个问题，每个问题的答案都是“是”、“否”或“任何一个”我想在列表的每一行中选择其中任何一个 @987654321 @

我做了什么，我在 List 中取了网格列表，但我无法管理它，即使我将三个按钮作为行而不是网格，它仍然无法工作

   ListView.builder(
        itemCount: 2,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (context, index) {
          final _isSelected = _selectedIndexs.contains(index);
          return Container(
            margin: EdgeInsets.only(top: 30),
            child: Column(
              children: [
                Container(
                    height: 42,
                    margin: EdgeInsets.only(left: 30, right: 30),
                    child: TextFormField(
                      readOnly: true,
                      controller: questionController,
                      decoration: new InputDecoration(
                        labelText: "Question 1",
                        labelStyle: TextStyle(color: Colors.grey[600]),
                        fillColor: Colors.white,
                        focusedBorder: new OutlineInputBorder(
                          borderRadius: new BorderRadius.circular(10.0),
                          borderSide:
                              new BorderSide(color: Colors.grey.shade400),
                        ),
                        border: new OutlineInputBorder(
                          borderRadius: new BorderRadius.circular(10.0),
                          borderSide:
                              new BorderSide(color: Colors.grey.shade600),
                        ),
                      ),
                    )),
                Container(
                    height: 50,
                    width: double.infinity,
                    margin: EdgeInsets.only(left: 30, right: 30, top: 10),
                    child: GridView.count(
                        physics: NeverScrollableScrollPhysics(),
                        crossAxisCount: 3,
                        childAspectRatio: 2,
                        children: List.generate(3, (index1) {
                          List<String> choiceList = ["Yes", "No", "Either"];
                          return InkWell(
                            onTap: () {
                              setState(() {
                                selectedAns = index1;

                                // if (_isSelected) {
                                //   _selectedIndexs.remove(index);
                                // } else {
                                //   _selectedIndexs.add(index);
                                // }
                              });
                            },
                            child: Container(
                              margin: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border.all(
                                    color: (selectedAns == index1)
                                        ? Constants.appfadeColor
                                        : Colors.grey.shade700,
                                    width: 1),
                                borderRadius: BorderRadius.circular(10),
                                color: (selectedAns == index1)
                                    ? Constants.appfadeColor
                                    : Colors.white,
                              ),
                              height: 40,
                              width: 90,
                              child: Center(
                                child: Text(
                                  choiceList[index1],
                                  style: TextStyle(
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.w400,
                                      fontSize: 14,
                                      color: Colors.black),
                                ),
                              ),
                            ),
                          );
                        })))
              ],
            ),
          );
        }

注意-：如果我点击“是”，它的背景必须变成红色，如果我点击“否”，它的背景就会变成红色，但“是”的背景必须变成白色，意味着一行中只有一个按钮选择

【问题讨论】：

你在哪里设置红色代码？我见过 Constants.appfadeColor。是红色的吗？
是的，不要专注于颜色，我的意思是我可以一次为不同的行选择一个按钮，就像 mcq 最后我必须将选择的答案数组发送到后端
还有一个问题。您还必须创建一个列表而不是一个变量 selectedAns。
任何你可以建议它必须像 mcq 一样工作的答案

标签： flutter dart flutter-layout dart-pub

【解决方案1】：

尝试为每一行实现 ToggleButtons，这样您应该能够解决您的问题。更多详情请查看here。

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

【讨论】：