时间戳

首页 > 解决方案 > 如何在 Flutter 中使用 2 个不同对象的不同列表解析数据下拉列表

flutter - 如何在 Flutter 中使用 2 个不同对象的不同列表解析数据下拉列表

问题描述

我如何使用 1 个具有 2 个不同列表项的模板下拉菜单构建下拉菜单。我很困扰。我有 1 类下拉列表，但我想要 2 个不同的列表，只使用 1 类下拉列表我希望你明白我的意思

DropdownButton<MenuItem>(
            isExpanded: true,
            icon: Icon(Icons.keyboard_arrow_down),
            value: dropdownValue,
            onChanged: (MenuItem newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: items.map<DropdownMenuItem<MenuItem>>((MenuItem value) {
              return DropdownMenuItem<MenuItem>(
                value: value,
                child: Text(value.name),
              );
            }).toList());
      }

    class MenuItem {
      final int id;
      final String name;

      const MenuItem(this.id, this.name);
    }
    const List<MenuItem> items = [
      MenuItem(1, 'Facebook'),
      MenuItem(2, 'Instagram'),
      MenuItem(3, 'THREE'),
      MenuItem(4, 'FOUR'),
    ];

在此处输入图像描述

标签： flutter

解决方案

您需要做的是，通过抽象合并不同的对象。现在我们有了MenuItem抽象类，我们在小部件类中使用它，因为我们需要一个公共Class来合并不同的对象。由于它们在 内部有共同String的字段DropdownMenu，因此很容易合并。那里没问题。

这也意味着：

[...items1, ...items2]

我们正在创建一个由其他两个列表组合的新列表。

这个问题更多的是关于OOP而不是Flutter。试着做一些练习，Abstraction你会明白的。

我们在类DropdownMenu下的值变量State：

class _DropDownTestState extends State<DropDownTest> {
  MenuItem value;

解决方案，这是 DropDown 小部件：

DropdownButton<MenuItem>(
    isExpanded: true,
    icon: Icon(Icons.keyboard_arrow_down),
    value: value,
    onChanged: (MenuItem newValue) {
      setState(() {
        value = newValue;
      });
    },
    items: <MenuItem>[...items1, ...items2]
        .map<DropdownMenuItem<MenuItem>>((MenuItem value) {
      return DropdownMenuItem<MenuItem>(
        value: value,
        child: Text(value.name),
      );
    }).toList())

这些是与一个抽象类相关的不同对象的类：

abstract class MenuItem {
  final String name;

  const MenuItem(this.name);
}

class MenuItem1 extends MenuItem {
  final int id;
  final String name;

  const MenuItem1(this.id, this.name) : super(name);
}

class MenuItem2 extends MenuItem {
  final String name;
  final double price;

  const MenuItem2(this.price, this.name) : super(name);
}

列表：

const List<MenuItem1> items1 = [
  MenuItem1(1, 'ONE'),
  MenuItem1(2, 'TWO'),
  MenuItem1(3, 'THREE'),
];

const List<MenuItem2> items2 = [
  MenuItem2(10, 'FOO'),
  MenuItem2(50, 'BAR'),
  MenuItem2(90, 'BAZ'),
];

推荐阅读