Riverpod 未來提供者不重建 ui

Question

我的問題是，當我運行應用程序時，數據不會顯示在 UI 上。 下面的代碼在底部導航欄格式下呈現，這是一個有狀態的小部件。 據我所知，以下代碼應該可以工作（顯示應用程序初始運行的數據）。

代碼有效，但數據僅在我按下熱重載時顯示。 我已經嘗試了所有我知道的東西，但是當我啟動應用程序時它仍然沒有顯示數據。

final imageControllerProvider = Provider((ref) {
  return ImageController();
});

final mainScreenImages = FutureProvider<List<String>>((ref) async {
  List<String> list = [];
  list = await ref.watch(imageControllerProvider).getImages();
  return list;
});

class ImageController{

Future<List<String>> getImages() async {
    List<String> imageUrls = [];

    try {
      final Reference reference =   _storage.ref().child("weed/");
      reference.listAll().then((value) {
        for (var element in value.items) {
          element.getDownloadURL().then((e) => imageUrls.add(e));
        }
      });
    } catch (e) {
      print(e);
    }

    return imageUrls;
  }
}

class GenerateImages extends ConsumerWidget {
  const GenerateImages({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final imageList = ref.watch(mainScreenImages);
    final double screenwidth = MediaQuery.of(context).size.width;
    final double screenheight = MediaQuery.of(context).size.height;

    return imageList.when(data: (data) {
      return Text('$data');
      
    }, error: (_, __) {
      return const Scaffold(
        body: Center(
          child: Text("OOPS"),
        ),
      );
    }, loading: () {
      return const Center(child: const CircularProgressIndicator());
    });
  }
}

Answer 1

我認為問題是因為在getImages()中您不是在等待結果，而是在使用then()處理程序來注冊回調。 用這個替換你的getImages()函數並嘗試。

Future<List<String>> getImages() async {
    List<String> imageUrls = [];

    try {
      final Reference reference = _storage.ref().child("weed/");
      final value = await reference.listAll();
      for (var element in value.items) {
          final url = await element.getDownloadURL();
          imageUrls.add(url);
      }
    } catch (e) {
      print(e);
    }

    return imageUrls;
  }
}