下拉按钮值在网格视图的每个项目中都发生了变化

Question

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

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

发生这种情况是因为您使用 _dropDownValue 检索每个 DropDown 的值。为了使其工作，您必须使用例如存储每个网格的每个选择。列表或地图。

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;
                      },
                    );
                  },
                )
              ],
            ),
          );
        },
      );
  }
}

下拉按钮值在网格视图的每个项目中都发生了变化

Drop Down Button Value is getting changed in every item of grid view flutter

gridview

dart

drop-down-menu

flutter