如何显示来自 API 的项目答案

【问题标题】：How to display items from API如何显示来自 API 的项目
【发布时间】：2023-02-17 01:12:20
【问题描述】：

我成功地使用 ListView.builder 显示了项目，现在我想根据它们在 API 上的 ACTIVE 或 INACTIVE 状态来显示这些项目。所以当我想显示ACTIVE时，它只显示活动项目，与INACTIVE一样。

API是这样的：

我不必附加身份 1100，因为它像身份 1200 一样是活动的

我的代码是这样的：

BlocBuilder<ExcavatorBloc, ExcavatorState>(
                    builder: (context, state) {
                      return ListView.builder(
                        itemCount: state.excavator.length,
                        itemBuilder: (context, index) {
                          return Row(
                            children: [
                              const SizedBox(
                                height: 10,
                                width: 10,
                                child: CircleAvatar(
                                  foregroundColor:
                                      ColorName.brandSecondaryGreen,
                                  backgroundColor:
                                      ColorName.brandSecondaryGreen,
                                ),
                              ),
                              const SizedBox(
                                width: 5,
                              ),
                              Text(
                                state.excavator[index].identity,
                                style: subtitle1(),
                              ),
                            ],
                          );
                        },
                      );
                    },
                  ),

【问题讨论】：

标签： flutter dart bloc

【解决方案1】：

我会这样做，而不必为活动设备创建一个额外的计数器：

return ListView.builder(
  itemCount: state.excavator.length,
  itemBuilder: (context, index) {
    return Visibility(
      visible: state.excavator[index].status == "ACTIVE" ? true : false,
      child: Row(
        children: [
          const SizedBox(
            height: 10,
            width: 10,
            child: CircleAvatar(
              foregroundColor: ColorName.brandSecondaryGreen,
              backgroundColor: ColorName.brandSecondaryGreen,
            ),
          ),
          const SizedBox(
            width: 5,
          ),
          Text(
            state.excavator[index].identity,
            style: subtitle1(),
          ),
        ),
    ],
  );

【讨论】：