简介

图片也是一个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();
  },
)

Flutter Widget - Image 图片

文章目录

简介

Image 属性

加载本地图片

网络图片加载loading

猜你喜欢