(Flutter) 在 Grid View Builder 中选择对项目的影响？

Question

如果单击 gridview 项目之一然后 CARD 更改颜色，如何更改 CARD 小部件的颜色。但您只能选择一项。我该怎么做？？？

Widget listDenomPulsa(AsyncSnapshot <List<Payload>> snapshot) {
    return GridView.builder(
        shrinkWrap: false,
        scrollDirection: Axis.vertical,
        itemCount: snapshot.data.length,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 3),
        ),
        itemBuilder: (BuildContext context, int index) {
          bool _selectItem = false;
          return GestureDetector(
            onTap: () {
              setState(() {
                  _selectItem = true;
              });
            },
            child: Card(
              color: _selectItem ? Colors.blue:Colors.amber,
              child: Container(
                height: SizeConfig.heightMultiplier * 3,
                child: Padding(
                  padding: EdgeInsets.all(SizeConfig.heightMultiplier * 3),
                  child: Text(
                    snapshot.data[index].desc,
                    style: AppTheme.styleSubTitleBlackSmall,
                  ),
                ),
              ),
            ),
          );
        }
    );
  }

Answer 1

这将完美地工作，检查下面的代码：

class MyGridView extends StatefulWidget {
  @override
  _MyGridViewState createState() => _MyGridViewState();
}

class _MyGridViewState extends State<MyGridView> {

  // set an int with value -1 since no card has been selected  
  int selectedCard = -1;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        shrinkWrap: false,
        scrollDirection: Axis.vertical,
        itemCount: 10,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 3),
        ),
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              setState(() {
                // ontap of each card, set the defined int to the grid view index 
                selectedCard = index;
              });
            },
            child: Card(
              // check if the index is equal to the selected Card integer
              color: selectedCard == index ? Colors.blue : Colors.amber,
              child: Container(
                height: 200,
                width: 200,
                child: Center(
                  child: Text(
                    '$index',
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
            ),
          );
        });
  }
}

输出： 在此处输入图片说明

我希望这可以帮助你。