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

Question

我在这里使用两个下拉菜单。

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

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

前

更改城市值后

这是我的两个下拉代码

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

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

Answer 1

设定城市变化的_weight价值null

Answer 2

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

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

}