Flutter Widget - Image 图片

Posted 2023-03-01 优小U

文章目录

• 简介
• Image 属性
• 加载本地图片
• 网络图片加载loading

简介

图片也是一个widget，指定图片得方式有几种：

• Image.new ，用于从ImageProvider获取图像。
• Image.asset ，用于 使用密钥从AssetBundle获取图像。
• Image.network，用于从 URL 获取图像。
• Image.file ，用于从File获取图像。
• Image.memory ，用于从Uint8List获取图像。

支持以下图像格式：JPEG、PNG、GIF、动画 GIF、WebP、动画 WebP、BMP 和 WBMP。底层平台可能支持其他格式。Flutter 将尝试调用平台 API 来解码无法识别的格式，如果平台 API 支持解码图像，Flutter 将能够渲染它。

显示网络图片：

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg')

flutter 会自动下载图片，并缓存它。

Image 属性

• width 宽度
• height 高度
• alignment 对齐方式(基于宽高)，默认是居中
• fit 图像在空间中的分布方式（fill,fitWidth,fitHeight等）默认contain
• isAntiAlias 是否使用抗锯齿绘制图像。旋转图像时，抗锯齿可减轻锯齿状。
• opacity 透明度
• repeat 绘制未被图像覆盖的布局边界的部分
• semanticLabel 图像描述
• gaplessPlayback 当图像发生变化时，是继续显示旧图像 (true)，还是暂时不显示任何图像 (false)。默认值为false。
• centerSlice
• color 颜色与每个图像像素混合
• colorBlendMode 颜色混合模式
• errorBuilder 图像加载期间错误
• excludeFromSemantics 是否从语义中排除此图像
• filterQuality 图像的渲染质量
• image
• frameBuilder
• loadingBuilder
• matchTextDirection

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Image 图片'),
        ),
        body: Image.network(
          'https://images.pexels.com/photos/12509555/pexels-photo-12509555.jpeg?auto=compress&cs=tinysrgb&w=200&dpr=1',
          width: 300,
          height: 400,
          alignment: Alignment.center,
          filterQuality: FilterQuality.high,
          fit: BoxFit.none,
          opacity: const AlwaysStoppedAnimation(.5),
          gaplessPlayback: false,
          repeat: ImageRepeat.repeat,
          // color: Colors.green[100],
          // colorBlendMode: BlendMode.color,
          errorBuilder:  (BuildContext context, Object exception, StackTrace? stackTrace) 
            return const Text('Error!');
          ,

        )
      )
    );
  

加载本地图片

在 pubspec.yaml 添加资源文件或文件夹：

# pubspec.yaml

flutter:
  assets:
    - assets/1.jpg

如果文件太多可以直接 - assets/ 来加载整个文件夹的资源。

使用：

Image.asset('assets/2.jpg')

网络图片加载loading

如果是网络图片，可以设置loading来使用户更有体验感

Image.network(
  'https://images.pexels.com/xxxx.jpeg',
  loadingBuilder: (context, child, progress) 
    return progress == null ? child : const CircularProgressIndicator();
  ,
)