如何迭代集合（例如Map）并为集合中的每个子类型呈现单独的小部件？

Question

我有一个对象列表，这些对象都是动物的子类型。我将它们全部转换为动物列表中的supertype，以便将它们的引用保存在一个位置。到现在为止，一直都还不错。

现在，当我呈现每个动物对象的状态信息时，我希望根据每个动物对象的子类型使用不同的小部件。当我从超类型转换为子类型时，即使我指定字段是动态的，也会出现错误。

Type 'type' is not a subtype of type '<subtype>'

看来，dart编译器使用的类型信息，从动画Tiles映射强制所有元素的类型是动物，即使我传递到的类型的构造函数采取了一个动态命名参数，我希望这将是松散的。

// ANIMAL LIST
class AnimalList extends StatelessWidget {

final Map<String, Animal> animals;

    @override
    Widget build(BuildContext context) {

        List<Widget> animalTiles = [];
        animals.forEach(
          (key, setting) => animalTiles.add(
            AnimalTile(animal: animal),
          ),
        );

        return Column(
            children: animalTiles,
        );
    }
}

// ANIMAL TILE

class AnimalTile extends StatelessWidget {
  AnimalTile({
    required animal,
  }) {
    _buildDescription(animal);
  }
  late dynamic animal;
  late Widget description;

    Widget _buildDescription(dynamic setting) {
    if (animal.type == Animal.CAT) {
      Cat cat = animal;
      return CatWidget(cat: cat);
    } else if (animal.type == Animal.DOG) {
      Dog dog = animal;
      return DogWidget(dog: dog);
    } else if (animal.type == Animal.MOUSE) {
      Mouse mouse = animal;
      return MouseWidget(mouse: mouse);
    } else {
      return Container(child: Text(':('));
    }
  }

    @override
    Widget build(BuildContext context) {
        return(
            ...
        );
    }
}

Dart类型系统要求我在初始化列表中的构造函数体之前初始化最终字段，或者直接分配给参数列表中的实例字段。如果我在构造函数的主体中调用一个辅助方法，那就不被认为是最终的，所以我不想将其用于不可变的无状态小部件。

这一定是一种常见的模式。。我试图将所有子类型保持在同一个列表中，然后使用子类型显示不同的小部件。为什么这种方法失败了？在Dart中实现这种模式的有效方法是什么？

Answer 1

Flatter Cookbook有一个创建不同子类型项目列表的示例。然而，我发现自己在重复我希望基类可以使用的数据字段。因为，如果我对抽象动物类使用extends代替实现（即接口上的继承），我会得到一个异常，表明Dart正在查看基类的方法，而不是子类中被重写的方法。这不是保持代码干燥的最佳解决方案，但它确实有效。

不幸的是，这意味着我没有一个解决方案，使我能够将我的许多动物使用的数据字段保留在一个类中，但是我发布这个来演示一个有效的模式。

更新：

您还可以跨子类型重用数据字段，同时使用extends（继承）和implements（接口）确保调用的方法是子类型重写的方法。

这是我的解决方案，请胜过我：

// Base Class
abstract class AnimalBase {
  AnimalBase({
    required this.height,
    required this.weight,
    required this.name,
    required this.genus,
    required this.species,  
  });

  final int height;
  final double weight;
  final String name;
  final String genus;
  final String species;

  static const CAT = 0;
  static const DOG = 1;
  static const MOUSE = 2;

  static AnimalFactory(Map<String, dynamic> json, int type) {
    // IN MY CASE I PASS THE TYPE TO A FACTORY

    switch (type) {
      case CAT:
        return Cat.fromJson(json);
      case DOG:
        return Dog.fromJson(json);
      case MOUSE:
        return Mouse.fromJson(json);
      default:
        return null;
    }
  }
}

// Interface Class
abstract class Animal; {
  Widget buildTile();

  Widget description();
}


// Example SubType
class Dog extends AnimalBase with Animal {
  Dog({
    required height,
    required weight,
    required name,
    required genus,
    required species,  
  }) : super(height: height, weight: weight, name: name, genus: genus, species: species);

  @override
  Dog.fromJson(Map<String, dynamic> json)
    throw new UnimplementedError();
  }

  Map<String, dynamic> toJson() {
    throw new UnimplementedError();
  }

  @override
  Widget buildTile() {
    return DogTile(dog: this);
  }

  @override
  Widget description() {
    return DogDescription(dog: this);
  }
}

class AnimalList extends StatelessWidget {
  AnimalList({
    Key? key,
    required this.animals,
  }) : super(key: key);

  final Map<String, Animal> animals;

  @override
  Widget build(BuildContext context) {
    List<Widget> animalTiles = [];
    animals.forEach(
      (key, animal) => animalTiles.add(
        AnimalTile(animal: animal),
      ),
    );

    return CustomScrollView(
      shrinkWrap: true,
      slivers: [
        SliverToBoxAdapter(
          child: Column(
            children: ...animalTiles.map(animal => animal.buildTile()).toList(),
          ),
        ),
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Divider(
                color: Colors.black54,
                height: 18,
                thickness: 4,
                indent: 20,
                endIndent: 20,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

我希望我有一个只需要一个关键字（extends或implements）的解决方案，但这是我最好的解决方案：）