Flutter中无法从WordPress REST API获取产品图片问题求助

我在Flutter应用中尝试加载产品图片，但始终无法成功，还触发了未知错误，不清楚问题出在哪。

错误截图：

以下是我的代码（完全按照教程编写，教程中的代码在老师那边能正常运行）：

class _MyPageState extends State<MyPage> {
  late List<Product>? listproduct;

  @override
  void initState() {
    fetchAllProducts().then((value) => listproduct = value);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: fetchAllProducts(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: listproduct!.length,
              itemBuilder: (context, index) {
                return Card(
                  child: ListTile(
                    title: Text(listproduct![index].name.toString()),
                    subtitle: Text('${listproduct![index].price} تومان'),
                    leading:
                        Image.network(listproduct![index].images!.join(', ')),
                  ),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

问题分析与修复方案 #

• 重复请求导致数据不一致：你在initState和FutureBuilder里各调用了一次fetchAllProducts()，会发起两次网络请求，且listproduct和snapshot.data可能不是同一批数据，直接用FutureBuilder返回的snapshot.data即可，无需单独维护listproduct变量。
• 图片URL处理错误：images!.join(', ')会把多个图片URL拼接成逗号分隔的字符串，这不是合法的图片地址。如果images是多图列表，应该取单个有效URL（比如第一个元素），还要处理空列表的情况。
• 强制解空不安全：大量使用!强制解空，一旦数据为空会直接抛出异常，改用空安全语法处理更稳妥。

修正后的代码 #

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Product>>(
        future: fetchAllProducts(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Text('请求错误: ${snapshot.error}');
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Center(child: Text('暂无产品数据'));
          }

          final products = snapshot.data!;
          return ListView.builder(
            itemCount: products.length,
            itemBuilder: (context, index) {
              final product = products[index];
              // 处理图片URL：取第一个图片，为空则用占位图
              final imageUrl = product.images?.isNotEmpty == true 
                  ? product.images![0] 
                  : 'https://via.placeholder.com/50';

              return Card(
                child: ListTile(
                  title: Text(product.name ?? '无名称'),
                  subtitle: Text('${product.price ?? 0} تومان'),
                  leading: Image.network(
                    imageUrl,
                    errorBuilder: (context, error, stackTrace) {
                      // 图片加载失败时显示占位图标
                      return const Icon(Icons.image_not_supported);
                    },
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

额外说明 #

• 确保fetchAllProducts()返回的Product类中，images是List<String>?类型，存储的是单个图片的完整URL。
• 如果需要展示多张图片，可以用Row或GridView遍历images列表生成多个图片组件。

内容的提问来源于stack exchange，提问作者Hana.HD