Flutter 基础 widgets Image

Image.asset() 加载本地图片

使用步骤：

（1）、Flutter 项目下，创建图片存储目录

（2）、在 pubspec.yaml 中的 flutter 部分添加图片配置

（3）、在代码中加载图片

 

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image'),
      ),
      body: Column(
        children: [
          // 加载本地图片
          // 默认撑满父容器的宽度
          Image.asset('assets/image1.jpg'),
          // 仅指定宽度或高度时，图片会按照宽高比例自适应
          Image.asset(
            'assets/image2.jpg',
             200,
            // height: 200,
          )
        ],
      ),
    );
  }
}

关于 fit 属性的介绍

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image'),
      ),
      body: Container(
         double.infinity,
        padding: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Image.asset(
              'assets/image2.jpg',
               200,
              height: 200,
              // 图片在容器内填充的方式，相当于 CSS 的 background-size 属性
              // cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。尽可能大的缩放背景图片并保持图片的宽高比例（图片不会被压扁）
              // 当容器和背景图片大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪
              // contain: 缩放背景图片以完全装入背景区，可能背景区部分空白。尽可能的缩放背景图片并保持图片的宽高比例（图片不会被压缩）
              // 当容器和背景图片大小不同时，容器的空白区域（左/右 或者 上/下）会显示由 background-color 设置的背景颜色
              // fill：填满容器的宽高，图片会丢失比例
              fit: BoxFit.fill,
            )
          ],
        ),
      ),
    );
  }
}

Image.network() 加载网络图片

使用步骤：

（1）、保证网络畅通

（2）、设置网络访问权限

（3）、允许 http 协议访问

 

（实测：未做下图中的配置，也可以正常访问网络图片）

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image'),
      ),
      body: Container(
         double.infinity,
        padding: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // https
            Image.network(
              'https://flutter.cn/assets/images/cn/flutter-cn-logo.png',
            ),
            Image.network(
              'https://flutter.cn/assets/images/cn/flutter-cn-logo.png',
              // 图片重复
              repeat: ImageRepeat.repeat,
              // 图像混合模式，类似蒙层
              colorBlendMode: BlendMode.colorDodge,
              color: Colors.green,
            ),
            // http
            Image.network(
              'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg?x-oss-process=image/resize,m_pad,h_50,w_50',
            )
          ],
        ),
      ),
    );
  }
}