Flutter 图片组件

Flutter 图片组件

概述

图片组件是Flutter的基础组件之一。图标组件包含Image和Icon两个组件，Icon本是是一种文字，只是显示的是图标而不是文字，Image是通过图片解码器将图片解码加载，所以Icon体积更小、加载更快、不会失真。

基本属性

width/height：设置图片宽高。如果不设置宽高时，图片会显示原始大小；如果只设置宽或高，则另一个属性会按比例缩放。

fit：图片显示模式：
    - BoxFit.fill：拉伸填充显示空间，图片会变形。
    - BoxFit.cover：图片会按比例放大填充满显示空间，超出显示空间的部分会被裁剪。
    - BoxFit.contain：图片默认显示规则，按比例缩放适应显示空间。
    - BoxFit.fitWidth：图片宽度会缩放到显示空间的宽度，高度会按比例缩放，居中显示，超出显示空间的部分会被剪裁。
    - BoxFit.fitHeight：图片高度会缩放到显示空间的高度，宽度会按比例缩放，居中显示，超出显示空间的部分会被剪裁。
    - BoxFit.none：图片显示原始大小，只会显示图片中间部分。

color：设置图片颜色。

colorBlendMode：设置颜色混合模式。

repeat：图片小于显示空间时，设置图片的重复规则。

加载本地图片

需要在pubspec.yaml文件中，配置如下：

flutter:

  uses-material-design: true

  assets:
    - images/logo.png
    - images/pub.png
    - images/user.png

加载图片

Image(
    image: AssetImage("images/logo.png"),
    width: 100,
)

可简写为

Image.asset(
    "images/logo.png",
    width: 100,
)

加载网络图片

Image(
    image: NetworkImage(
        "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"),
    width: 100,
)

可简写为

Image.network(
    "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
    width: 100,
)

其他特效

淡入淡出效果

加载图片时淡入淡出效果

Image.network(
    "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
    width: 100,
    frameBuilder: (
        BuildContext context,
        Widget child,
        int? frame,
        bool wasSynchronouslyLoaded,
    ) {
        if (wasSynchronouslyLoaded) {
            return child;
        } else {
            return AnimatedOpacity(
                opacity: frame == null ? 0 : 1,
                duration: const Duration(seconds: 2),
                child: child,
                curve: Curves.easeOut,
            );
        }
    },
)

loading动画

Image.network(
    "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
    width: 100,
    loadingBuilder: (
        BuildContext context,
        Widget child,
        ImageChunkEvent? loadingProgress,
    ) {
        if (loadingProgress == null) {
            return child;
        } else {
            return CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                ? loadingProgress.cumulativeBytesLoaded /
                loadingProgress.expectedTotalBytes!
                : null,
            );
        }
    },
)

圆形头像加边框

Container(
    width: 100,
    height: 100,
    padding: const EdgeInsets.all(3),
    decoration: const BoxDecoration(
        shape: BoxShape.circle, color: Colors.blue),
    child: Container(
        decoration: const BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
                image: NetworkImage(
                    "https://img1.baidu.com/it/u=1235679188,872295587&fm=26&fmt=auto",
                ),
                fit: BoxFit.cover,
            ),
        ),
    ),
)

添加占位图

Image.network(
    "https://img1.baidu.com/it/u=1235679188,872295587&fm=26&fmt=auto",
    width: 100,
    fit: BoxFit.cover,
    //加载中占位
    frameBuilder: (
        BuildContext context,
        Widget child,
        int? frame,
        bool wasSynchronouslyLoaded,
    ) {
        if (frame == null) {
            return Image.asset("images/logo.png", width: 100);
        } else {
            return child;
        }
    },
    //加载失败占位
    errorBuilder: (
        BuildContext context,
        Object error,
        StackTrace? stackTrace,
    ) {
        return Image.asset("images/user.png", width: 100);
    },
)

字体图标

Flutter可以像web开发一样使用字体图标iconfont。

在Text组件中使用

Flutter默认包含一套MaterialDesign的字体图标，在pubspec.yaml文件中配置：

flutter:

  uses-material-design: true

String icons = "";
icons += "\uE03e";
icons += "\uE237";
icons += "\uE287";

Text(
    icons,
    style: TextStyle(
        fontFamily: "MaterialIcons",
        fontSize: 24,
        color: Colors.blue,
    ),
)

Icon

Row(
    children: [
        Icon(Icons.error, color: Colors.green),
        Icon(Icons.euro, color: Colors.green),
        Icon(Icons.event, color: Colors.green),
    ],
)

自定义字体图标

在pubspec.yaml文件里配置

fonts:
  - family: myIcon
    fonts:
      - asset: fonts/iconfont.ttf
        style: italic

使用：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Icon(IconData(0xe678, fontFamily: "myIcon")),
    SizedBox(width: 10),
    Icon(IconData(0xe679, fontFamily: "myIcon")),
    SizedBox(width: 10),
    Icon(IconData(0xe69c, fontFamily: "myIcon")),
  ],
)