Flutter 图片和资源的高效使用指南

程序员海军

已于 2024-01-05 13:57:06 修改

阅读量980

点赞数 15

分类专栏： Flutter 起步指南：从零打造你的第一个应用文章标签： flutter javascript 前端

于 2024-01-04 10:49:19 首次发布

本文链接：https://blog.csdn.net/HaiJun_Aion/article/details/135380999

版权

Flutter 起步指南：从零打造你的第一个应用专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

Flutter 应用程序包含代码和 assets（也为资源）。资源是被打包到应用程序安装包中，可以在运行时访问的一种文件。常见的资源类型包括静态数据（例如 JSON 文件），配置文件，图标和图片（JPEG，WebP，GIF，动画 WebP / GIF，PNG，BMP 和 WBMP）。

指定资源

Flutter 使用 pubspec.yaml 文件，位于项目根目录，来识别应用程序所需的资源。

什么是 pubspec.yaml 文件

在Flutter中，pubspec.yaml文件是一个用于管理项目依赖项和资源的配置文件。它位于Flutter项目的根目录下，并且是一个YAML格式的文本文件。

pubspec.yaml文件包含了以下主要内容：

项目信息：你可以在name字段中指定项目名称，在description字段中提供项目描述，在version字段中指定项目版本号等。
依赖项管理：你可以使用dependencies字段来列出项目所依赖的Flutter包或其他Dart库。每个依赖项都有一个名称和一个版本约束。当你运行flutter pub get命令时，Flutter会根据pubspec.yaml文件中的依赖项配置自动下载并安装所需的包。
资源管理：你可以使用assets字段来指定项目中需要作为资源使用的文件路径。这些资源可以是图片、字体、配置文件等。通过在pubspec.yaml文件中配置资源路径，Flutter可以将这些资源文件打包到应用程序中，并且你可以通过相应的API来访问它们。
其他配置：pubspec.yaml文件还可以包含其他配置项，例如构建设置、环境变量等。

name: my_flutter_app  # 项目名称
description: A sample Flutter application  # 项目描述
version: 1.0.0  # 项目版本号

environment:
	sdk: ">=2.12.0 <3.0.0"  # Flutter SDK版本要求

dependencies:
flutter:
  sdk: flutter  # Flutter框架依赖
  
  cupertino_icons: ^1.0.2  # 依赖于Cupertino图标库，指定版本约束为1.0.2
  
  http: ^0.13.4  # 依赖于HTTP网络请求库，指定版本约束为0.13.4

dev_dependencies:
	flutter_test:
		sdk: flutter  # 开发环境下的测试依赖

flutter:
  assets:
  - assets/images/  # 资源文件夹路径
  - assets/fonts/   # 字体文件夹路径

fonts:
  - family: Roboto  # 字体族名称
    fonts:
  - asset: assets/fonts/Roboto-Regular.ttf  # 字体文件路径
    - asset: assets/fonts/Roboto-Bold.ttf
      weight: 700  # 字体粗细设置

示例配置
:::info
当配置完该文件，一定要运行**flutter pub get**命令：在终端中运行flutter pub get命令，以确保Flutter项目依赖项和资源已正确配置。
:::

图片

图片常用的配置属性

属性	说明
image	要显示的图片
width	图片宽度
height	图片高度
fit	图片适应方式
alignment	图片对齐方式
repeat	图片重复方式
color	图片着色颜色
colorBlendMode	图片着色模式
filterQuality	图片滤镜质量
semanticLabel	图片的语义标签
excludeFromSemantics	是否从语义树中排除图片

这些属性可以通过Image小部件的构造函数或者使用Image.asset()、Image.network()等静态方法进行设置。

加载本地图片

通过 pubspec.yml 文件进行配置图片目录

在根目录下创建assets 放置资源目录，创建 images 文件夹存放图片资源

flutter:
  uses-material-design: true
  assets:
    - images/

使用 Image.asset 小部件加载本地图片

Image.asset('images/3.png')

显示效果

加载网络图片

通过 `Image.network`小部件加载网络图片：使用Image.network小部件来加载网络图片。将图片的URL作为参数传递给Image.network构造函数。

Image.network('https://img0.baidu.com/it/u=2132093665,1645757234&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500')

显示效果

可选：处理加载过程中的占位符和错误情况：

你可以使用placeholder参数指定一个占位符图像，在网络图片加载完成之前显示。另外，你还可以使用errorBuilder参数来自定义加载失败时的错误显示。

Image.network(
  'https://img0.baidu.com/it/u=2132093665,1645757234&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  placeholder: AssetImage('assets/images/placeholder.png'),
  errorBuilder: (context, error, stackTrace) {
    return Text('加载图片失败');
  },
)