如何使用 getx obx 而不是 future builder 来显示图像列表

Question

我正在尝试显示存储在我的 Firebase 云存储中的图像列表。我将图像名称存储在我的 Firestore 中。我的 getURL() 函数将下载 url 作为相应图像的未来。

使用 future builder 我成功地显示了列表。我正在尝试使用 Obx GetX 来实现相同的目标。问题是颤振试图在检索 URL 之前显示图像。如何在第二种方法中成功返回小部件的未来

ListView.builder(
                      itemCount: deviceListController.devices[index].images !=
                              null
                          ? deviceListController.devices[index].images!.length
                          : 0,
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      itemBuilder: (context, imageIndex) {
                        return SizedBox(
                          height: 100,
                          width: 100,
                          child: FutureBuilder(
                            future:
                                deviceListController.getURL(index, imageIndex),
                            builder: (context, snapshot) {
                              switch (snapshot.connectionState) {
                                case ConnectionState.waiting:
                                  return CircularProgressIndicator();

                                case ConnectionState.done:
                                  return Image.network(deviceListController
                                      .devices[index].imageURL[imageIndex]!);
                                // case ConnectionState.none:

                                // case ConnectionState.active:
                                default:
                                  return Icon(Icons.accessible_forward);
                              }
                            },
                          ),
                        );
                      },
                    ),

这是我的尝试。问题是我不知道如何以 obx 样式返回/实现未来。

Obx(
                      () => ListView(
                          scrollDirection: Axis.horizontal,
                          children: deviceListController.devices[index].images!
                              .asMap()
                              .map((ind, image) {
                                deviceListController.getURL(index, ind);
                                return MapEntry(
                                    ind, Image.network(device.imageURL[ind]!));
                              })
                              .values
                              .toList()),
                    ),

编辑：这是我能想到的最接近的。它仍然不加载图像。 Flutter 在异步任务完成之前寻找图像。

Obx(() {
                        return deviceListController.devices[index].images !=
                                null
                            ? ListView(
                                scrollDirection: Axis.horizontal,
                                children: deviceListController
                                    .devices[index].images!
                                    .asMap()
                                    .map((ind, image) {
                                      pageState(AppState.loading);
                                      deviceListController.getURL(index, ind);
                                      pageState(AppState.loaded);
                                      return pageState.value == AppState.loading
                                          ? MapEntry(
                                              ind,
                                              Image.network(
                                                  device.imageURL[ind]!))
                                          : MapEntry(
                                              ind, CircularProgressIndicator());
                                    })
                                    .values
                                    .toList())
                            : Spacer();
                      }),

Answer 1

尝试使用enum 进行状态管理。

enum AppState { initial, loading, loaded, error, empty, disabled }
Rx<AppState> pageState = AppState.initial.obs;

pageState(AppState.loading);
await some time taking operation.
pageState(AppState.loaded);

Obx(
          () => pageState.value == AppState.loading
              ? Center(child: CircularProgressIndicator())
              : YOUR WIDGET

在这里，您可以使用枚举来创建状态，并根据就绪状态显示小部件。