如何根据对象模型内容使用自定义小部件创建ListView

debugcn 发表于 Dev

Think_Twice

我想创建一个具有动态内容的ListView。

例如，我有一个宠物的对象/模型。它具有以下属性：名称，年龄，dateOfBirth，dateOfDeath和图片。

现在，我想在每个Pet实例自定义小部件中都有逻辑，以检查是否存在dateOfDeath或图像。如果没有它或它为null，我不想在屏幕上创建另一个Text / Image小部件。

我希望它类似于Java具有RecylcerView的方式，我们创建了一个自定义适配器，如果它们为空值，则可以隐藏组件。

我搜索并观看了许多YouTube视频，但没有找到解决我问题的方法。它们都只是具有静态数据，而没有潜在的空数据。

这是我当前拥有的代码示例：

class PetListItem extends StatelessWidget {

  final Pet pet;

  PetListItem (this.pet);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Text(
            pet.name
          ),
          Text(
            pet.age
          ),
          Text(
            pet.dob
          ),
          Text(
            pet.dod // I want this to display if pet.dod is not null
          ),
          NetworkImage(
              pet.imageURL // I want this to display if pet.imageURL is not null
          )
        ],
      ),
    );
  }
}

任何帮助，将不胜感激。提前致谢。

Midhun MP

您可以使用三元运算符有条件地创建窗口小部件：

@override
Widget build(BuildContext context) {
  return Card(
    child: Column(
      children: <Widget>[
        Text(pet.name),
        Text(pet.age),
        Text(pet.dob),
        pet.dod != null ? Text(pet.dod) : Container(),
        pet.imageURL != null ? NetworkImage(pet.imageURL) : Container(),
      ],
    ),
  );
}

如果您不希望在返回null的情况下返回空的Container，则可以使用conditional_builder包。

ConditionalBuilder(
   condition: pet.dod != null,
   builder: (context) => Text(pet.dod),
),

ConditionalBuilder(
   condition: pet.imageURL != null,
   builder: (context) => NetworkImage(pet.imageURL),
),

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。