当我从 FLUTTER 的下拉列表中更新数据时出错？

Question

当用户在下拉列表 A 中选择一个值时，此小部件在向 url 发出请求后创建下拉菜单项，但是当用户更改下拉列表 A 的值时，我得到错误。我尝试研究此错误，但没有找到有用的答案。

代码如下

  FutureBuilder(
            future: listProductsPrice(currentProducts),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return Center(
                  child: DropdownButton(
                    hint: Text("Preço"),
                    value: currentPriceProducts,
                    items: null,
                    onChanged: (selected) {},
                  ),
                );
              } else {
                List<PriceProducts> priceProducts = snapshot.data;
                return _listViewProductsPrice(priceProducts, "Preço");
              }
            }),


  Widget _listViewProductsPrice(List<PriceProducts> priceProducts, title) {
    return Container(
        color: Color.fromRGBO(245, 242, 240, 0.20),
        child: DropdownButton(
          hint: Text(title),
          value: currentPriceProducts,
          items: priceProducts.map((products) {
            return DropdownMenuItem(
              value: products.value,
              child: Container(
                  child: Text(
                products.value,
                style: TextStyle(fontSize: 13),
              )),
            );
          }).toList(),
          onChanged: (selected) {
            // widget.objMobileRecharge.area_code = int.parse(selected);
            print(selected);
            setState(() {
              currentPriceProducts = selected;
            });
          },
        ));
  }

有人知道如何解决这个问题吗？

'package:flutter/src/material/dropdown.dart': Failed assertion: line 560 pos 15: 'items == null || I/flutter (11514): items.isEmpty || value == null || items.where((DropdownMenuItem item) => item.value == I/flutter (11514): value).length == 1': is not true.

Answer 1

DropdownButtonvalue 是当前选中的 DropdownMenuItem 的值，如果没有选中任何项，则可以为 null。

这部分items.where((DropdownMenuItem<T> item) => item.value == value).length == 1 来自异常意味着没有（或多个）DropdownMenuItem 和value 您为DropdownButton value 设置了value（在本例中为value: currentPriceProducts）。

例子：

DropdownButton(
  hint: Text("Hint"),
  value: "abc123", // currently selected value - "abc123" or "def456" or null
  items: [
    DropdownMenuItem(
      value: "abc123",
      child: Text("ABC123"),
    ),
    DropdownMenuItem(
      value: "def456",
      child: Text("DEF456"),
    ),
  ],
  onChanged: (value) {},
)

看起来这里的问题是 FutureBuilder。当您选择一个值时，将调用 setState() 并重建小部件。这意味着 FutureBuilder 被重建并且listProductsPrice(currentProducts) 被再次调用并且可能返回不同的值。如果这些值不包含您选择的值，则会出现此错误。

因此您可以这样做：使用下拉菜单创建有状态小部件

class Dropdown extends StatefulWidget {
  final String title;
  final List<PriceProduct> priceProducts;

  const Dropdown({Key key, this.title, this.priceProducts}) : super(key: key);

  @override
  _DropdownState createState() => _DropdownState();
}

class _DropdownState extends State<Dropdown> {

  String _selected;

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      hint: Text(widget.title),
      value: _selected,
      items: widget.priceProducts.map((product) {
        return DropdownMenuItem(
          value: product.value,
          child: Container(
            child: Text(
              product.value,
              style: TextStyle(fontSize: 13),
            ),
          ),
        );
      }).toList(),
      onChanged: (value) {
        setState(() {
          _selected = value;
        });
      },
    );
  }
}

然后像这样使用它：

FutureBuilder(
  future: listProductPrice(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return Center(
        child: DropdownButton(
          hint: Text("Preço"),
        ),
      );
    } else {
      return Dropdown(title: "Preço", priceProducts: snapshot.data);
    }
  },
)