Flutter 初识：图像与媒体控件

最新推荐文章于 2026-06-17 09:36:35 发布

原创

最新推荐文章于 2026-06-17 09:36:35 发布 · 1.1k 阅读

标签

#flutter #媒体

Flutter图像与媒体控件小结

在Flutter中，处理图像和媒体控件（例如视频和音频）变得非常简单和高效。

图像控件

本地图片Image.asset

要显示应用程序中的本地图片，可以使用Image.asset：

属性解析

 Image.asset(
    String name, {
    super.key,
    AssetBundle? bundle,
    this.frameBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double? scale,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    String? package,
    this.filterQuality = FilterQuality.low,
    int? cacheWidth,
    int? cacheHeight,
  })

name: 图片资源的名称或 URL。
key: 唯一标识这个组件的键值。
bundle: 用于加载图片的资源包。
frameBuilder: 自定义图片构建方式的构建器函数。
errorBuilder: 处理加载图片时错误的构建器函数。
semanticLabel: 用于无障碍访问的标签。
excludeFromSemantics: 是否将图片排除在语义树之外。
scale: 图片的缩放因子。
width: 图片的宽度。
height: 图片的高度。
color: 用于给图片着色的颜色。
opacity: 图片的不透明度。
colorBlendMode: 应用颜色滤镜时使用的混合模式。
fit: 图片如何适配其外框。
alignment: 图片在其边界内如何对齐。
repeat: 如果图片没有填满其框，如何重复图片。
centerSlice: 描述九切片图像中心部分的矩形。
matchTextDirection: 当文本方向为 RTL（从右到左）时是否水平翻转图片。
gaplessPlayback: 当图像提供者改变时，是否继续显示旧图片。
isAntiAlias: 是否对图片应用抗锯齿处理。
package: 从哪个包加载图片的包名。
filterQuality: 图片过滤的质量。
cacheWidth: 缓存图片的宽度。
cacheHeight: 缓存图片的高度。

示例

class ImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image.asset 示例')),
        body: Center(
          child: Image.asset(
            'assets/1.jpeg',
            key: Key('image_key'),
            scale: 2.0,
            width: 200,
            height: 200,
            // color: Colors.red,
            colorBlendMode: BlendMode.colorBurn,
            fit: BoxFit.cover,
            alignment: Alignment.topLeft,
            repeat: ImageRepeat.noRepeat,
            matchTextDirection: false,
            gaplessPlayback: true,
            isAntiAlias: true,
            filterQuality: FilterQuality.high,
            cacheWidth: 100,
            cacheHeight: 100,
          ),
        ),
      ),
    );
  }
}

备注：
如图：
在这里插入图片描述

网络图片Image.network

要显示来自网络的图片，可以使用Image.network：

属性解析

Image.network(
    String src, {
    super.key,
    double scale = 1.0,
    this.frameBuilder,
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    this.isAntiAlias = false,
    Map<String, String>? headers,
    int? cacheWidth,
    int? cacheHeight,
  })