Question

我如何使用1个模板构建下拉列表，以及2个不同列表项的下拉列表。我很困扰。我有1个班级下拉列表，但我只想使用1个班级下拉列表创建2个不同的列表希望你明白我的意思

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

Answer 1

您需要做的是通过抽象合并不同的对象。现在我们有了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'),
];

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

1 个答案: