Flutter：制作选定的卡片

Question

我有简单的水平 ListviewBuilder，里面有可以选择的卡片。但问题是，当我选择其中一张卡时，所有卡都被选择。我想要的是我只能选择一张卡，如果我选择另一张卡，删除旧的选择并创建新的选择到新卡。这个怎么做 ？

像这样的东西：

我的失败结果

这是我的源代码：

import 'package:flutter/material.dart';

class IconMenu {
  final IconData iconName;
  final String titleIcon;
  IconMenu({this.iconName, this.titleIcon});
}

List<IconMenu> iconList = [
  IconMenu(iconName: Icons.ac_unit, titleIcon: "AC Unit"),
  IconMenu(iconName: Icons.access_alarm, titleIcon: "Alarm"),
  IconMenu(iconName: Icons.accessibility_new, titleIcon: "accessiblity"),
  IconMenu(iconName: Icons.add, titleIcon: "Add"),
];

class TestingScreen extends StatefulWidget {
  static const routeName = "/testing-page";

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

class _TestingScreenState extends State<TestingScreen> {
  bool selectedList = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: iconList.length,
              itemBuilder: (BuildContext context, int index) {
                return InkWell(
                  onTap: () => setState(() => selectedList = !selectedList),
                  child: Container(
                    width: 150,
                    child: Card(
                      shape: selectedList
                          ? RoundedRectangleBorder(
                              side: BorderSide(color: Colors.green))
                          : null,
                      elevation: 5,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          Icon(iconList[index].iconName),
                          Text(iconList[index].titleIcon)
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

您应该采用 aint作为所选索引。

int selectedIndex=-1

然后您可以检查每张卡是否position等于selectedIndex所选的卡。

class _TestingScreenState extends State<TestingScreen> {
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {

        return Scaffold(
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 200,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: iconList.length,
                  itemBuilder: (BuildContext context, int position) {
                    return InkWell(
                      onTap: () => setState(() => selectedIndex=position),
                      child: Container(
                        width: 150,
                        child: Card(
                          shape: (selectedIndex==position)
                              ? RoundedRectangleBorder(
                                  side: BorderSide(color: Colors.green))
                              : null,
                          elevation: 5,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: <Widget>[
                              Icon(iconList[position].iconName),
                              Text(iconList[position].titleIcon)
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        );
  }   
}