Flutter加载图片的多样玩法汇总

目录
  • 加载本地图片
  • 圆角本地图片
    • 效果图
    • 代码
  • 加载网络图片-本地图片占位图
  • 加载网络图片-loading
    • 效果
    • 代码
  • 圆角、边框、渐变
  • 总结

加载本地图片

在项目目录下创建assets文件夹,再在其文件夹下创建images文件夹,后面将需要的图片复制到其中即可

在pubspec.yaml文件中添加引用

flutter:
  uses-material-design: true
  assets:
    - assets/images/

在Container中加载本地图片

 Container(
              width: 400.0,//容器宽度
              height: 100.0,//容器高度
              margin: const EdgeInsets.all(10.0),
              child: Image.asset('assets/images/bg.jpg'),
            ),

圆角本地图片

效果图

代码

Container(
              decoration: ShapeDecoration(
                image: const DecorationImage(
                  image: AssetImage('assets/images/bg.jpg'),//加载本地图片
                  fit: BoxFit.cover
                ),
                  shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(10.0))
              ),
              width: 400.0,//容器宽度
              height: 100.0,//容器高度
              margin: const EdgeInsets.all(10.0),//外边距
            )

加载网络图片-本地图片占位图

在网络图片未加载出来时,显示本地图片,当网络图片返回时替换本地图片并展示一个深入浅出的动画,如果加载错误,则显示错误图

Container(//使用本地的图片作为占位图
              width: 500.0,//容器宽度
              height: 200.0,//容器高度
              child: FadeInImage.assetNetwork(
                  placeholder: "assets/images/bg.jpg", //默认占位图
                  imageErrorBuilder: (context, error, stackTrace) {//如果加载网络错误,显示错误背景
                    return Container(
                      width: 500.0,
                      height: 200.0,
                      color: Colors.grey,
                    );
                  },
                  image: "https://i0.hdslb.com/bfs/album/85dcfb9ae68ec58b447d823448b27f26e3d69b23.jpg"),
            ),

加载网络图片-loading

效果

代码

当网络图片未加载完成时,显示loading动画,直到加载完成

 Container(//使用加载loading作为占位图
              width: 500.0,
              height: 150.0,
              margin: const EdgeInsets.only(top: 10.0),
              child: Image.network(
                "https://i0.hdslb.com/bfs/album/85dcfb9ae68ec58b447d823448b27f26e3d69b23.jpg",
                errorBuilder: (context,error,stackTrace){
                  return CircularProgressIndicator();
                },
                loadingBuilder: (context,child,loadingProgress){
                  if(loadingProgress == null)return child;
                  return Container(
                    alignment: Alignment.center,
                    child: CircularProgressIndicator(
                      value: loadingProgress.expectedTotalBytes != null ?
                      loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null,
                    ),
                  );
                },
              ),
            ),

圆角、边框、渐变

BoxDecoration 解释
color 背景颜色
image 背景图片
border 边框
borderRadius 圆角
gradient 渐变
shape 形状
Container( //单组件布局容器,只允许有一个子组件
              alignment: Alignment.center,//对齐方式:居中
              width: 500.0,//容器宽度
              height: 200.0,//容器高度
              //color: Colors.blue,容器背景颜色
              padding: const EdgeInsets.all(10.0),//外边距
              margin: const EdgeInsets.all(10.0),//内边距
              decoration:  BoxDecoration(//类似原生Android的XML创建样式一样
                  gradient: const LinearGradient(colors: [Colors.red,Colors.green,Colors.amber]),//线性渐变,需要先注释原有存在的背景颜色语句
                  border: Border.all(color:Colors.black,width: 5.0),//绘制边框,边框颜色为黑色,边框宽度为5
                  borderRadius: const BorderRadius.all(Radius.circular(10.0)),//设置边框圆角
                  shape: BoxShape.rectangle//盒子样式形状
              ),
              child: const Text(容器内子组建
                'Hello World!',
                style: TextStyle(fontSize: 20.0,color: Colors.white),
              ),
            ),

内边距和外边距使用如下:

 padding: const EdgeInsets.all(10.0),//外边距
 margin: const EdgeInsets.all(10.0),//内边距

总结

到此这篇关于Flutter加载图片的文章就介绍到这了,更多相关Flutter加载图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter Image实现图片加载

    Image 简介 Android ios 原生中使用 ImageView 来加载显示图片. 在flutter 中通过Image来加载并显示图片. 所有的widget并不是直接绘制图片的,而是控制的图片的主要属性的容器,负责绘制的是RenderObject,他们中间是通过ElementTree来联系起来.有了这个基础后,所有的widget都不会提供画布(canvas)来直接绘制image RawImage 这是一个最基础图片容器Widget. Image 这是一个通用包装类,它包装了RawImag

  • Flutter中网络图片加载和缓存的实现

    前言 应用开发中经常会碰到网络图片的加载,通常我们会对图片进行缓存,以便下次加载同一张图片时不用再重新下载,在包含有大量图片的应用中,会大幅提高图片展现速度.提升用户体验且为用户节省流量.Flutter本身提供的Image Widget已经实现了加载网络图片的功能,且具备内存缓存的机制,接下来一起看一下Image的网络图片加载的实现. 重温小部件Image 常用小部件Image中实现了几种构造函数,已经足够我们日常开发中各种场景下创建Image对象使用了. 有参构造函数: Image(Key k

  • flutter 轮播图动态加载网络图片的方法

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. Swiper,网上很多例子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况. 需要添加依赖包 flukit: ^1.0.0 引用 import 'package:flukit/flukit.da

  • Flutter图片加载与缓存机制的深入探究

    目录 前言 图片控件 图片解析 缓存管理 ​新增缓存 缓存清理 图片加载 滑动中处理 总结 前言 今天来学习一下 Flutter 自身是如何加载图片和管理图片的. Flutter 提供了一个图片控件 Image,Image 定义了若干中加载图片的方式,包括 Image.asset.Image.file.Image.network.Image.memory. Image内部维护了一个 ImageProvider对象,ImageProvider则真正维护整个图片加载的工作.Widget 本身内部是体

  • Flutter加载图片的多样玩法汇总

    目录 加载本地图片 圆角本地图片 效果图 代码 加载网络图片-本地图片占位图 加载网络图片-loading 效果 代码 圆角.边框.渐变 总结 加载本地图片 在项目目录下创建assets文件夹,再在其文件夹下创建images文件夹,后面将需要的图片复制到其中即可 在pubspec.yaml文件中添加引用 flutter: uses-material-design: true assets: - assets/images/ 在Container中加载本地图片 Container( width:

  • Flutter加载图片流程MultiFrameImageStreamCompleter解析

    目录 MultiFrameImageStreamCompleter _handleCodecReady _decodeNextFrameAndSchedule _codec!.getNextFrame() _emitFrame(重要方法, 通知监听器触发回调,更新UI) _scheduleAppFrame _handleAppFrame addListener removeListener _maybeDispose 总结 MultiFrameImageStreamCompleter Multi

  • Flutter加载图片流程之ImageProvider源码示例解析

    目录 加载网络图片 ImageProvider resolve obtainKey resolveStreamForKey loadBuffer load(被废弃) evict 总结 困惑解答 加载网络图片 Image.network()是Flutter提供的一种从网络上加载图片的方法,它可以从指定的URL加载图片,并在加载完成后将其显示在应用程序中.本节内容,我们从源码出发,探讨下图片的加载流程. ImageProvider ImageProvider是Flutter中一个抽象类,它定义了一种

  • Flutter加载图片流程之ImageCache源码示例解析

    目录 ImageCache _pendingImages._cache._liveImages maximumSize.currentSize clear evict _touch _checkCacheSize _trackLiveImage putIfAbsent clearLiveImages 答疑解惑 ImageCache const int _kDefaultSize = 1000; const int _kDefaultSizeBytes = 100 << 20; // 100 M

  • jQuery滚动加载图片实现原理

    本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的

  • 网页前端优化之滚动延时加载图片示例

    为什么要延时加载呢?页面加载的时候就显示全部的图片不就得了?有必要多此一举吗?答案是肯定的.当要加载的图片或者内容很多时,如果一次性加载完毕,那么整个页面将会加载很久,意味着要用户等待很久,这是对用户不友好的.或许你还会问,那不就做个分页不就得了?其实这种滚动延时加载的技巧正是用来代替手动点击下一页的分页技术.每换一页都要用户点击一次,这也是对用户不友好的.所以才有了滚动延时加载. 我这里把加载图片作为例子,就好像百度图片里的一样,你往下滚动,它就会继续显示下一页的图片. 要求是这样的,比如我要

  • Jquery promise实现一张一张加载图片

    Promise是CommonJS的规范之一,拥有resolve.reject.done.fail.then等方法,能够帮助我们控制代码的流程,避免函数的多层嵌套.如今异步在web开发中越来越重要,对于开发人员来说,这种非线性执行的编程会让开发者觉得难以掌控,而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象,年底即将发布的ES6也将原生实现Promise. 在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能.

  • android异步加载图片并缓存到本地实现方法

    在android项目中访问网络图片是非常普遍性的事情,如果我们每次请求都要访问网络来获取图片,会非常耗费流量,而且图片占用内存空间也比较大,图片过多且不释放的话很容易造成内存溢出.针对上面遇到的两个问题,首先耗费流量我们可以将图片第一次加载上面缓存到本地,以后如果本地有就直接从本地加载.图片过多造成内存溢出,这个是最不容易解决的,要想一些好的缓存策略,比如大图片使用LRU缓存策略或懒加载缓存策略.今天首先介绍一下本地缓存图片. 首先看一下异步加载缓存本地代码: 复制代码 代码如下: public

  • Android开发之加载图片的方法

    本文实例讲述了Android开发之加载图片的方法.分享给大家供大家参考.具体分析如下: 加载网络上的图片需要在manifest中配置访问网络的权限,如下: <uses-permission android:name="android.permission.INTERNET" /> 如果不配置这个权限的话,会报错:unknown host exception. package com.example.loadimgfromweb; import java.io.InputSt

  • UIImage加载图片Images.xcassets加载方法的影响

    UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageNamed:,只需传入文件名.扩展名(可选)即可. 不缓存:+ imageWithContentsOfFile:,必须传入文件的全名(全路径+文件名). 注意,对于有缓存功能的方法来说,其创建对象的步骤如下: 根据图片文件名在缓存池中查找特定的UIImage对象,入存在,将这个对象返回. 如果不存在,则从b

随机推荐