flutter - 尝试通过 Flutter 中的 VxMutation 和 VxState 进行 http 调用

Question

我正在尝试使用 HTTP.get 从 JSON 中获取横幅数据。我确实成功地获取了数据，但是有一些错误导致了这个错误：

它显示以下错误 2 秒，然后加载图像。它没有显示我放置的加载小部件。我相信 Build 方法是在获取 HTTP 数据之前构建小部件。是这种情况，那么为什么它没有显示 CircularProgressIndicator？

2-3秒后：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    FetchBanners(); //<--------is this right?
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final banner = (VxState.store as MyStore).bannerModel;
    VxState.watch(context, on: [FetchBanners]);
    return Scaffold(
      body: Column(
        children: [
          VxBuilder(
            mutations: {FetchBanners},
            builder: (context, store, status) => VxSwiper.builder(
              aspectRatio: 4 / 1.75,
              enableInfiniteScroll: true,
              itemCount: 4,
              itemBuilder: (context, index) => Container(
                  child: banner!.items![index].url != null
                      ? Image(
                          image: NetworkImage(banner.items![index].url!), //<-----Null check operator used on a null value
                        )
                      : CircularProgressIndicator()), //<---Why Error and Not This??
            ),
          ),
        ],
      ),
    );
  }
}

---

class FetchBanners extends VxMutation<MyStore> {
  Future perform() async {
    final url = "https://jsonplaceholder.typicode.com/albums/2/photos";
    var response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      final decodedData = jsonDecode(response.body);
      store?.bannerModel?.items =
          List.from(decodedData).map<BannerItem>((item) {
        return BannerItem.fromMap(item);
      }).toList();
     
      print(store?.bannerModel?.items![0].url); // But This Prints actual Result!!!
    } else {}
  }
}

我在这里使用了VelocityX包。和 VxState 用于状态管理，作为 VelocityX 的一部分。

Answer 1

解决了。这是空安全操作员的困惑！

只有当它不为空时，Dart 才想转到下一行。并且检查 Null 不应包含“！” 但 ”？” 问题是，我正在检查“！= null”而不是“== null”

 child: banner?.items?[index].url == null
                        ? CircularProgressIndicator()
                        : Image(
                            image: NetworkImage(banner!.items![index].url!),
                            fit: BoxFit.cover,
                          )