P08. Flutter Image图片组件的使用

我们都希望自己写的程序赏心悦目,俗话说的好一图顶千言,所以图片的运用在程序制作里至关重要。本文我们就来看一下flutter图片组件的使用。

加入图片的几种方式

  • Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
  • Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
  • Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
  • Image.memory: 加载Uint8List资源图片,这个我目前用的不是很多,所以没什么发言权。

我们现在就以加入网络图片为例子,在Container里加入一张图片,代码如下:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
              scale: 1.0,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

这时候就可以看到图片被加入进来了,当然我们还顺便设置了容器的宽和高。

flutter加入网络图片例子

fit属性的设置

fit属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的。

BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。

示例:

child: Image.network(
  'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
  scale: 1.0,
  fit: BoxFit.fill,
),

BoxFit.fill属性使用

BoxFit.contain:全图显示,显示原比例,可能会有空隙。

示例:

child: Image.network(
  'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
  scale: 1.0,
  fit: BoxFit.contain,
),

flutter加入网络图片例子

BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。

示例:

child: Image.network(
  'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
  scale: 1.0,
  fit: BoxFit.cover,
),

flutter BoxFit.cover效果

BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。

示例:

child: Image.network(
  'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
  scale: 1.0,
  fit: BoxFit.fitWidth,
),

flutter BoxFit.fitWidth效果

BoxFit.fitHeight:高度充满(竖向充满),显示可能拉伸,可能裁切。

示例:

child: Image.network(
  'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
  scale: 1.0,
  fit: BoxFit.fitHeight,
),

flutter BoxFit.cover效果

BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大。

图片的混合模式

图片混合模式(colorBlendMode)和color属性配合使用,能让图片改变颜色,里边的模式非常的多,产生的效果也是非常丰富的。在这里作几个简单的例子,让大家看一下效果,剩下的留给小伙伴自己探索。

child: Image.network(
  'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
  color: Colors.greenAccent,
  colorBlendMode: BlendMode.darken,
),
  • color:是要混合的颜色,如果你只设置color是没有意义的。
  • colorBlendMode:是混合模式,相当于我们如何混合。

图片混合模式(colorBlendMode)和color属性配合使用

repeat图片重复

  • ImageRepeat.repeat: 横向和纵向都进行重复,直到铺满整个画布。
  • ImageRepeat.repeatX: 横向重复,纵向不重复。
  • ImageRepeat.repeatY:纵向重复,横向不重复。

来个全部重复的代码。

child:new Image.network(
  'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
   repeat: ImageRepeat.repeat,
),

repeat图片重复

图片的使用在程序中个人觉的是非常有意思的,也能制作出很多酷炫的效果,这方面的相关属性希望大家下去多多练习。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P08. Flutter Image图片组件的使用

发表评论

提供最优质的资源集合

立即查看 了解详情