在网格视图的每一项中，下拉按钮的值都在变化。

Question

我正在创建一个应用程序，它要求用户从网格视图的每个项目的下拉菜单中选择一个值。但是当我从一个下拉菜单中选择一个值时，它也会改变其他下拉菜单的值。

GridView.builder(
        itemCount: 50,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, childAspectRatio: 1),
        itemBuilder: (BuildContext context, int index) {
          return new Card(
            child: Column(
              children: [
                DropdownButton(
                  hint: _dropDownValue == null
                      ? Text('Dropdown')
                      : Text(
                          _dropDownValue,
                          style: TextStyle(color: Colors.blue),
                        ),
                  isExpanded: true,
                  iconSize: 30.0,
                  style: TextStyle(color: Colors.blue),
                  items: ['One', 'Two', 'Three'].map(
                    (val) {
                      return DropdownMenuItem<String>(
                        value: val,
                        child: Text(val),
                      );
                    },
                  ).toList(),
                  onChanged: (val) {
                    setState(
                      () {
                        _dropDownValue = val;
                      },
                    );
                  },
                )
              ],
            ),
          );
        },
      ),

这是我正在使用的代码。

我所面临的问题的截图

Answer 1

发生这种情况是因为你使用以下方法检索每个DropDown的值 _dropDownValue. 为了使它工作，你必须使用列表或地图来存储每个网格的每个选择。

class MyWidget extends StatefulWidget {
  const MyWidget({Key key}) : super(key: key);

  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

  List<String> values = [
    "Grid 1 selection",
    "Grid 2 selection",
    "..."
  ];

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: 50,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, childAspectRatio: 1),
        itemBuilder: (BuildContext context, int index) {
          return new Card(
            child: Column(
              children: [
                DropdownButton(
                  hint: values[index] == null
                      ? Text('Dropdown')
                      : Text(
                          values[index],
                          style: TextStyle(color: Colors.blue),
                        ),
                  isExpanded: true,
                  iconSize: 30.0,
                  style: TextStyle(color: Colors.blue),
                  items: ['One', 'Two', 'Three'].map(
                    (val) {
                      return DropdownMenuItem<String>(
                        value: val,
                        child: Text(val),
                      );
                    },
                  ).toList(),
                  onChanged: (val) {
                    setState(
                      () {
                        values[index] = val;
                      },
                    );
                  },
                )
              ],
            ),
          );
        },
      );
  }
}