Flutter图片控件（七）

1、加载图片

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text("图片控件")),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 静态引入方式1
            const Image(
              image: AssetImage("assets/imgs/touxiang.jpg"),
              width: 100.0,
            ),
            const SizedBox(height: 10.0),
            // 静态引入方式2
            Image.asset(
              "assets/imgs/touxiang.jpg",
              width: 50.0,
            ),
            const SizedBox(
              height: 10.0,
            ),
            // 从网络加载图像
            const Image(
              image: NetworkImage(
                  "https://cdn.jsdelivr.net/gh/Justinc-github/images/touxiang.jpg"),
              width: 100.0,
            )
          ],
        ),
      ),
    );
  }
}

效果图：

引入图片

2、图片参数

const Image({
    super.key,
    required this.image,
    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.isAntiAlias = false,
    this.filterQuality = FilterQuality.medium,
  });

super.key：指定Image组件的标识，不指定自动生成一个标识符；
image：必选参数，它是一个ImageProvider对象，用于指定要显示的图片；
frameBuilder：在图片加载时显示一个自定义框架；
loadingBuilder：在图片加载时显示自定义加载指示器；
errorBuilder：在图片加载时显示一个自定义错误提示；
semanticLabel：为图片提供语义标签；
excludeFromSemantics：默认为false，设置为true图片将被排除在语义树之外，屏幕阅读器等辅助技术将不会读取它；
width：指定图片的宽；
height：指定图片的高；
color：用于给图片着色；
opacity：控制图片的透明度；
colorBlendMode：可选枚举值，指定颜色混合模式；
fit：可选枚举值。用于控制图片如何适应仪器，
- fill：填充父容器所有空间；
- cover：按照宽高比方法，超出部分会被裁掉；
- contain：按照长宽自适应当前父容器大小；
- fitWidth：缩放当前图片至显示空间的宽度，高度按比例缩放，然后居中显示；
- fitHeight：缩放当前图片至显示空间的高度，宽度按比例缩放，然后居中显示；
- none：没有适应，图片中间显示在控件内，超出部分会被剪裁。
alignment：可选对齐方式，默认为Alignment.center；
repeat：可选枚举值，指定图片是否重复显示，如何重复；
centerSlice：这是一个可选的Rect对象，指定如片中心切片区域，以便缩放时不会失真；
matchTextDirection：默认为false，设置为true时，方向取决于文本方向；
gaplessPlayback：默认为false，设置为true时，图片将在重新加载时无缝播放，不会出现闪烁；
isAntiAlias：默认为false，设置为true时，图片将使用抗锯齿基础，以减少边缘锯齿；
filterQuality：枚举值，默认为FilterQuality.medium，指定图片的过滤数量。

// 以fitshu'xing

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("图片控件"),
        ),
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                height: 100.0,
                child: Image(
                  image: AssetImage("assets/imgs/touxiang.jpg"),
                  fit: BoxFit.fill,
                ),
              ),
              SizedBox(
                height: 100.0,
                child: Image(
                  image: AssetImage("assets/imgs/touxiang.jpg"),
                  fit: BoxFit.cover,
                ),
              ),
              SizedBox(
                height: 100.0,
                child: Image(
                  image: AssetImage("assets/imgs/touxiang.jpg"),
                  fit: BoxFit.contain,
                ),
              ),
              SizedBox(
                height: 100.0,
                child: Image(
                  image: AssetImage("assets/imgs/touxiang.jpg"),
                  fit: BoxFit.fitWidth,
                ),
              ),
              SizedBox(
                height: 100.0,
                child: Image(
                  image: AssetImage("assets/imgs/touxiang.jpg"),
                  fit: BoxFit.fitHeight,
                ),
              ),
              SizedBox(
                height: 100.0,
                child: Image(
                  image: AssetImage("assets/imgs/touxiang.jpg"),
                  fit: BoxFit.none,
                ),
              ),
            ],
          ),
        ));
  }
}
        image: AssetImage("assets/imgs/touxiang.jpg"),
                  fit: BoxFit.none,
                ),
              ),
            ],
          ),
        ));
  }
}

Flutter图片控件（七）

1、加载图片

2、图片参数

悦读