如何使用Flutter中的2个不同对象列表解析数据下拉列表 [英] How Parsing Data Dropdown With 2 different list of different objects in Flutter

问题描述

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

How i can build dropdown with 1 template Dropdown with 2 different List Item. iam very confused. i have 1 class Dropdown but i want 2 different List just using 1 class Dropdown I hope you understand what I mean

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

推荐答案

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

What you need to do is, merging different objects via abstraction. Now we have MenuItem abstract class and we use it inside the widget clas, because we need a common Class to merge different objects. Since they have common String field to show inside the DropdownMenu, it's easy to how to merge. No problem there.

这也意味着:

[...items1, ...items2]

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

We are creating a new list combined by two other lists.

此问题更多地是关于OOP而不是Flutter.尝试对Abstraction会发现的问题进行一些练习.

This question is more about OOP rather than Flutter. Try to make some practise for Abstraction you'll figure out.

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

class _DropDownTestState extends State<DropDownTest> {
  MenuItem value;

解决方案是DropDown小部件:

And the solution, this is the DropDown widget:

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())

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

These are the Class of different objects connected with one abstract class:

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个不同对象列表解析数据下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！