flutter：下拉项以编程方式取消选择问题

Question

我这里用了两个下拉菜单。

两个数据均来自API。第二个数据取决于第一个下拉项。这意味着当我 select 来自第一个菜单的项目时，数据将出现在第二个下拉菜单中。而且它在动态变化。

我遇到了一个问题。当我更改第一个下拉列表中的项目时，第二个下拉列表显示错误。像这样-

Before

After Change City value

这是我的两个下拉菜单的代码

   // Choose City
            CustomDropDownMenu(
              items: allCity.map((list) {
                return DropdownMenuItem(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 20.0),
                    child: Text(
                      "${list["name"]}",
                      style: TextStyle(),
                    ),
                  ),
                  onTap: () {
                    setState(() {
                      isVisible = false;
                    });

                    getWeight(list["id"]).then((value) => {
                          setState(() {}),
                        });
                    print(list["id"]);
                    FocusScope.of(context).unfocus();
                    print(weightList.length);
                  },
                  value: list["id"].toString(),
                );
              }).toList(),
              value: _city,
              hint: "Choose City",
              onChanged: (value) {
                setState(() {
                  this._city = value;
                });
              },
            ),
// Weight
 CustomDropDownMenu(
              hint: "Select Weight",
              value: _weight,
              items: [
                DropdownMenuItem(child: Text("Select Weight")),
                ...weightList.map((list) {
                  return DropdownMenuItem(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 20.0),
                      child: Text(
                        "${list["weight"]}",
                        style: TextStyle(),
                      ),
                    ),
                    onTap: () {
                      FocusScope.of(context).unfocus();
                    },
                    value: list["id"].toString(),
                  );
                }).toList()
              ],
              onChanged: (value) {
                setState(() {
                  _weight = value;
                });
              },
            ),

这里是CustomDropDown()class

.. class CustomDropDownMenu extends StatelessWidget {   final String hint;   final dynamic value;

  final Function onChanged;   final Function onSaved;   final List<DropdownMenuItem<dynamic>> items;

  const CustomDropDownMenu({
    Key key,
    this.hint,
    this.onChanged,
    this.onSaved,
    this.items,
    this.value,   }) : super(key: key);   @override   Widget build(BuildContext context) {
    double _width = MediaQuery.of(context).size.width;
    return Container(
        decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(
            Radius.circular(60),
          ),
        ),
        child: Card(
          shape: StadiumBorder(),
          elevation: 5,
          child: DropdownButtonFormField(
            style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18.0,
                color: Colors.black),
            hint: Padding(
              padding: const EdgeInsets.only(left: 20.0),
              child: Text(
                hint,
                textAlign: TextAlign.end,
              ),
            ),
            decoration: InputDecoration(
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.transparent),
              ),
            ),
            value: value,
            onChanged: onChanged,
            onSaved: onSaved,
            items: items,
          ),
        ));   } }

这就是为什么我想以编程方式取消select 第二个下拉菜单项，但找不到解决方案。请有人帮助我。

Answer 1

在城市更改时设置 _weight 值 null

Answer 2

将您的 CustomDropDownMenu 转换为有状态小部件并实现以下代码：

  @override
 void didUpdateWidget(covariant AppDropDown oldWidget) {
   super.didUpdateWidget(oldWidget);
   if (!listEquals(oldWidget.items, widget.items)) {
      value = null;
   }

}

flutter：下拉项以编程方式取消选择问题

flutter: dropdown item programmatically unselect problem

unselect

dropdown

flutter

programmatically