Flutter框架跨平台鸿蒙开发——资源图片加载

[H*]2026-01-21 14:21

一、资源图片配置

AssetImage用于加载打包在应用中的图片资源。

配置步骤

创建assets目录
放置图片文件
配置pubspec.yaml
使用Image.asset

1. 创建目录结构

复制代码

assets/
  ├── images/
  │   ├── logo.png
  │   └── background.jpg
  └── icons/
      ├── icon.png
      └── avatar.png

2. 配置pubspec.yaml

yaml 复制代码

flutter:
  assets:
    - assets/images/
    - assets/icons/

二、基础用法

加载单个图片

dart 复制代码

Image.asset('assets/images/logo.png')

设置尺寸和样式

dart 复制代码

Image.asset(
  'assets/images/background.jpg',
  width: double.infinity,
  height: 200,
  fit: BoxFit.cover,
)

三、多分辨率支持

创建不同分辨率

复制代码

assets/
  └── images/
      ├── 2.0x/
      │   └── logo.png
      ├── 3.0x/
      │   └── logo.png
      └── logo.png

自动选择分辨率

dart 复制代码

Image.asset('assets/images/logo.png')
// 会自动根据设备DPI选择合适的分辨率

四、完整示例

dart 复制代码

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('资源图片')),
      body: ListView(
        padding: EdgeInsets.all(16),
        children: [
          Card(
            child: Column(
              children: [
                Text('Logo图片'),
                Image.asset('assets/images/logo.png', width: 100),
              ],
            ),
          ),
          SizedBox(height: 16),
          Card(
            child: Column(
              children: [
                Text('背景图片'),
                Image.asset(
                  'assets/images/background.jpg',
                  width: double.infinity,
                  height: 200,
                  fit: BoxFit.cover,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

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