Flutter Widget - Image 图片

Posted 优小U

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter Widget - Image 图片相关的知识,希望对你有一定的参考价值。

文章目录

简介

图片也是一个widget,指定图片得方式有几种:

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

支持以下图像格式:JPEGPNGGIF动画 GIFWebP动画 WebPBMPWBMP。底层平台可能支持其他格式。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);

  
  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 图片的主要内容,如果未能解决你的问题,请参考以下文章

Flutter自定义Widget—可加载原生图片资源的Image

Flutter自定义Widget—可加载原生图片资源的Image

Flutter 基本组件之Image

Flutter 实现图片缓存到本地

Flutter Web:图片相关及跨域问题

Flutter入门:动画相关