一、网络图片概述

NetworkImage用于从网络URL加载图片，是应用中最常用的图片来源。

网络图片加载流程

二、基础用法

简单加载

Image.network('https://example.com/image.jpg')

设置尺寸

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
)

设置适配模式

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.cover,
)

三、加载状态处理

加载中显示

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded /
                loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
)

错误处理

Image.network(
  'https://example.com/image.jpg',
  errorBuilder: (context, error, stackTrace) {
    return Container(
      color: Colors.grey.shade300,
      child: Icon(Icons.error),
    );
  },
)

四、缓存优化

缓存尺寸设置

Image.network(
  'https://example.com/large-image.jpg',
  width: 200,
  height: 200,
  cacheWidth: 400,  // 缓存时缩放到2倍
  cacheHeight: 400,
  fit: BoxFit.cover,
)

五、完整示例

class NetworkImageExample extends StatelessWidget {
  const NetworkImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('网络图片')),
      body: ListView(
        padding: EdgeInsets.all(16),
        children: [
          _buildImageCard('基础加载', 'https://via.placeholder.com/400x200'),
          SizedBox(height: 16),
          _buildImageWithLoading('带加载状态', 'https://via.placeholder.com/400x200'),
          SizedBox(height: 16),
          _buildImageWithError('带错误处理', 'https://example.com/invalid.jpg'),
        ],
      ),
    );
  }

  Widget _buildImageCard(String title, String url) {
    return Card(
      child: Column(
        children: [
          Text(title),
          Image.network(url),
        ],
      ),
    );
  }

  Widget _buildImageWithLoading(String title, String url) {
    return Card(
      child: Column(
        children: [
          Text(title),
          Image.network(
            url,
            loadingBuilder: (context, child, loadingProgress) {
              if (loadingProgress == null) return child;
              return CircularProgressIndicator();
            },
          ),
        ],
      ),
    );
  }

  Widget _buildImageWithError(String title, String url) {
    return Card(
      child: Column(
        children: [
          Text(title),
          Image.network(
            url,
            errorBuilder: (context, error, stackTrace) {
              return Container(
                height: 200,
                color: Colors.grey.shade300,
                child: Center(child: Text('加载失败')),
              );
            },
          ),
        ],
      ),
    );
  }
}

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net