flutter - 第二次单击颤动列表后删除列表中的选择

Question

我有一个显示字符串列表的列表，代码如下：

class CmCoinsValue extends StatefulWidget {
  @override
  _CmCoinsValueState createState() => new _CmCoinsValueState();
}

class _CmCoinsValueState extends State<CmCoinsValue> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.all(8),
        itemCount: CoinsChoice.coins.length,
        itemBuilder: (BuildContext context, int index) {
          return FlatButton(
            onPressed: () {
              if (selected) {
                // Again Click on Same Item
                setState(() {
                  selected = false;
                });
                // Set to -1 to indicate nothing is selected!
              } else {
                setState(() {
                  selected = true;
                });
                // Set Index to note the Selected Item
              }
            },
            child: new Card(
              color: Colors.lightBlueAccent,
              shape: selected // Check whether it is selected
                  ? new RoundedRectangleBorder(
                      side: new BorderSide(color: Colors.redAccent, width: 6.0),
                      borderRadius: BorderRadius.circular(4.0))
                  : new RoundedRectangleBorder(
                      side: new BorderSide(color: Colors.transparent, width: 2.0),
                      borderRadius: BorderRadius.circular(4.0)),
              child: new Padding(
                padding: const EdgeInsets.all(4.0),
                child: Container(
                  height: 35,
                  width: 100,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Text(
                        '${CoinsChoice.coins[index]}',
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        });
  }
}

问题是，目前我没有达到我想要的。实际上，如果我单击一个项目，所有项目都将被选中并且所有项目都会出现一个边框，我想要的是首先如果我再次单击该项目将被取消选择，我希望只有一个项目被选中并且不是全部. 有任何相关信息吗？

Answer 1

我可以给你一个想法。做这样的事情，

class _CmCoinsValueState extends State<CmCoinsValue> {
  bool selected = false;
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.all(8),
        itemCount: CoinsChoice.coins.length,
        itemBuilder: (BuildContext context, int index) {
          return FlatButton(
            onPressed: (){
              if(selectedIndex == index) {    // Again Click on Same Item
                  setState(() {
                     selectedIndex = -1;
                     selected = false;
                   });  
                // Set to -1 to indicate nothing is selected!
              } else {
                setState(() {
                  selectedIndex = index;
                  selected = true;    
                });
                // Set Index to note the Selected Item
              }
            },
            child: new Card(
              color: Colors.lightBlueAccent,
              shape: ( selected && selectedIndex == index)      // Check whether it is selected
                  ? new RoundedRectangleBorder(
                  side: new BorderSide(color: Colors.redAccent, width: 6.0),
                  borderRadius: BorderRadius.circular(4.0))
                  : new RoundedRectangleBorder(
                  side: .......

希望有效！