Flutter——最详细的Image(图像)使用教程

Image简介

用于显示一张图片,可以从文件、内存、网络、资源。可以指定适应方式、样式、颜色混合模式、重复模式等。

常用属性

属性作用
fit图片的适应模式
alignment图片的对齐模式

获取资源文件和网络图片

class ImageWidget extends StatelessWidget {
  final assetsImagePath = "assets/images/flutter_mark_logo.png";
  final netImageUrl =
      "https://flutterchina.club/images/homepage/header-illustration.png";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _loadFromAssets(),
        _loadFromNet(),
      ],
    );
  }

  Widget _loadFromAssets() => Wrap(
        spacing: 10,
        children: <Widget>[
          Image.asset(assetsImagePath, height: 80, width: 80),
        ],
      );

  Widget _loadFromNet() => Image.network(netImageUrl, height: 80);
}

在这里插入图片描述

属性:fit:BoxFit.values

class FitImage extends StatefulWidget {
  @override
  _FitImageState createState() => _FitImageState();
}

class _FitImageState extends State<FitImage> {
  @override
  Widget build(BuildContext context) {
    var imageLi = BoxFit.values
        .toList()
        .map((mode) => Column(children: <Widget>[
              Container(
                  margin: EdgeInsets.all(5),
                  width: 100,
                  height: 80,
                  color: Colors.grey.withAlpha(88),
                  child: Image(
                      image: AssetImage("assets/images/avaver.jpeg"),
                      fit: mode)),
              Text(mode.toString().split(".")[1])
            ]))
        .toList();

    return Wrap(
      children: [...imageLi],
    );
  }
}

在这里插入图片描述

属性:Alignment


class AlignmentImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var alignment = [
      Alignment.center,
      Alignment.centerLeft,
      Alignment.centerRight,
      Alignment.topCenter,
      Alignment.topLeft,
      Alignment.topRight,
      Alignment.bottomCenter,
      Alignment.bottomLeft,
      Alignment.bottomRight
    ]; //测试数组
    var imgLi = alignment
        .map((alignment) => //生成子Widget列表
            Column(children: <Widget>[
              Container(
                  margin: EdgeInsets.all(5),
                  width: 90,
                  height: 60,
                  color: Colors.grey.withAlpha(88),
                  child: Image(
                    image: AssetImage("assets/images/avaver.jpeg"),
                    alignment: alignment,
                  )),
              Text(alignment.toString())
            ]))
        .toList();
    var imageAlignment = Wrap(children: imgLi);
    return imageAlignment;
  }
}

在这里插入图片描述

图片重复模式

class RepeatImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: ImageRepeat.values
          .toList()
          .map((mode) => Column(children: <Widget>[
                Container(
                    margin: EdgeInsets.all(5),
                    width: 150,
                    height: 60,
                    color: Colors.red,
                    child: Image(
                        image: AssetImage("assets/images/avaver.jpeg"),
                        repeat: mode)),
                Text(mode.toString().split(".")[1])
              ]))
          .toList(),
    );
  }
}

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

怀君

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值