flutter - 下拉按钮的值在 GridView flutter 的每个项目中都得到更改

Question

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

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的值。为了使其正常工作，您必须使用来存储每个网格的每个选择。列表或 map 。

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