list - 在Flutter中点击其中一个元素时，如何更改列表中其他元素的属性

Question

我要做什么

我有Choice类，其中包括如下列表。

class Choice {
  Choice({this.title, this.selected});

  final String title;
  final IconData icon;

  bool selected;
}

List<Choice> categoryChoices = <Choice>[
  Choice(title: 'Highlights', selected: true),
  Choice(title: 'Coming Up', selected: false),
  Choice(title: 'England', selected: false),
  Choice(title: 'Germany', selected: false),
  Choice(title: 'Italy', selected: false),
  Choice(title: 'Spain', selected: false),
  Choice(title: 'France', selected: false),
  Choice(title: 'Turkey', selected: false),
];

我还有一个ChoiceButton类，它根据上面的选择列表生成GestureDetectors。

class ChoiceButton extends StatefulWidget {
  ChoiceButton({this.choice, this.onPressed});

  final Choice choice;
  final Function onPressed;

  @override
  _ChoiceButtonState createState() => _ChoiceButtonState();
}

class _ChoiceButtonState extends State<ChoiceButton> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        alignment: Alignment.center,
        child: Text(
          widget.choice.title,
          style: kTextStyleButtonPrimary.copyWith(
              fontSize: 16.0, fontWeight: FontWeight.normal),
        ),
        decoration: BoxDecoration(
          color: widget.choice.selected ? Colors.blue : Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          border: Border.all(
            color: Colors.blue,
          ),
        ),
        height: 40.0,
        width: 120.0,
      ),
      onTap: widget.onPressed,
    );
  }
}

有什么问题

在主屏幕中，我将这些手势检测器放在可滚动的行中。轻按手势检测器时，我正在更改颜色。没问题，我的代码可以完成所有这些工作。问题是，目前应该只有一个轻击的GestureDetector。当用户点击另一个时，我应该将所有其他选择的属性设置为false。我正在使用 map ，但无法找到到达 map 其他元素并将其选定属性设置为false的方法。做这种事情的最好方法是什么？

            Padding(
              padding: EdgeInsets.only(
                  left: 12.0, right: 12.0, top: 8.0, bottom: 2.0),
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: categoryChoices.map((Choice choice) {
                    print(choice);
                    return Padding(
                      padding: EdgeInsets.only(
                          left: 4.0, right: 4.0, top: 2.0, bottom: 2.0),
                      child: ChoiceButton(
                        choice: choice,
                        onPressed: () {
                          //var index = categoryChoices.indexOf(choice);
                          setState(() {
                            choice.selected = true;
                          });
                        },
                      ),
                    );
                  }).toList(),

Answer 1

您可以通过修改ChoiceButton实现来实现。您需要在Choice模型中添加一个唯一字段(整数id或类似的东西)，这里我假设您的标题字段是唯一的。

class ChoiceButton extends StatefulWidget {
  ChoiceButton({this.choice, this.onPressed, this.selectedChoice});

  final String selectedChoice; // Add this field to keep track of current selected choice value
  final Choice choice;
  final Function onPressed;

  @override
  _ChoiceButtonState createState() => _ChoiceButtonState();
}

class _ChoiceButtonState extends State<ChoiceButton> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        alignment: Alignment.center,
        child: Text(
          widget.choice.title,
          style: TextStyle(
              fontSize: 16.0, fontWeight: FontWeight.normal),
        ),
        decoration: BoxDecoration(
          // The selection is made based on currently selected value
          color: widget.selectedChoice == widget.choice.title ? Colors.blue : Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          border: Border.all(
            color: Colors.blue,
          ),
        ),
        height: 40.0,
        width: 120.0,
      ),
      onTap: widget.onPressed,
    );
  }
}

并在文件中(您将使用选择按钮的位置)声明一个变量以跟踪所选值)

String selectedValue;

现在，将您的ChoiceButton初始化代码更改为:

ChoiceButton(
   choice: choice,
   selectedChoice: selectedValue,
   onPressed: () {
      setState(() {
         selectedValue = choice.title;
      });
   },
),