如何为 image.network 提供占位符

在使用 Flutter 中的 image.network 组件时，我们可以为其提供一个占位符，以便在网络图片加载期间显示一张本地的临时图片。这样可以提高用户体验，让用户知道图片正在加载中。

下面是使用 image.network 提供占位符的代码示例：

import 'package:flutter/material.dart';

class MyImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.network(
        'https://example.com/image.jpg', // 图片地址
        loadingBuilder: (context, child, loadingProgress) {
          if (loadingProgress == null) return child; // 加载完成，直接显示图片
          return CircularProgressIndicator(); // 加载过程中显示一个圆形进度条
        },
        errorBuilder: (context, error, stackTrace) {
          return Icon(Icons.error); // 加载失败时显示一个错误图标
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: MyImageWidget(),
    ),
  ));
}

上述代码中使用了 image.network 组件，并为其提供了 loadingBuilder 和 errorBuilder 参数。loadingBuilder 用于控制加载过程中的占位符，errorBuilder 用于控制加载失败时的占位符。

loadingBuilder 参数是一个回调函数，它接收三个参数：context、child 和 loadingProgress。如果 loadingProgress 为 null，则加载完成，直接显示图片；否则，显示一个圆形进度条。

errorBuilder 参数也是一个回调函数，它接收三个参数：context、error 和 stackTrace。当加载图片失败时，可以在此回调函数中返回一个错误图标或其他占位符。

使用上述代码，即可为 image.network 提供占位符，让用户在图片加载期间有一个良好的视觉提示。