flutter 图片相关

官方链接:https://api.flutter.dev/flutter/widgets/Image-class.html

图片基本使用

显示本地图片时,要在pubspec.yaml文件里面添加如:(注意空格)
 assets:
    - assets/images/logo.png

 Fit属性:

BoxFit.cover最常用 显示可能拉伸,可能裁切,充满(图片要 不要求全图显示,充满整个容器,还不变形)。     
BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。(一般背景图时用)
BoxFit.contain:全图显示,显示原比例,可能会有空隙。
BoxFit.scaleDown:效果和 contain 差不多,但是此属性不允许显示超过源图片大小,可小不可大(自己总结:一般显示本地小图标时使用)
BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸, 可能裁切。 
BoxFit.fitHeight :高度充满(竖向充满),显示可能拉 伸,可能裁切。

官方链接:BoxFit enum - painting library - Dart API

Image和ImageProvider

获取Image

如果您需要Image小部件,请使用以下之一:

  • Image.asset()
  • Image.network()
  • Image.file()
  • Image.memory()

获取 ImageProvider

如果您需要ImageProvider,请使用以下之一:

  • AssetImage()
  • NetworkImage()
  • FileImage()
  • MemoryImage()

将 ImageProvider 转换为图像

Image(image: myImageProvider,
)

将图像转换为 ImageProvider

myImageWidget.image

图片优化相关

参考:快速掌握 Flutter 图片开发核心技能

Flutter中ListView加载图片数据的优化方案:当开始滚动时不加载图片,滚动结束后再加载图片,用到的关键技术:NotificationListener监听滚动状态

参考:Flutter中ListView加载图片数据的优化_flutter listview 图片_早起的年轻人的博客-CSDN博客

1.优化内存占用使用属性cacheWidth 或 cacheHeight:

cacheWidth 或 cacheHeight,则指示引擎应以指定大小解码图像。无论这些参数如何,图像都将根据约束进行渲染。cacheWidth 和 cacheHeight 主要是为了减少 ImageCache 的内存使用。

cacheWidth 和 cacheHeight 是为了优化内存用的,如果你能确定网络图片的尺寸都是合适的尺寸,就不用设置这两个参数。如果不能保证来源图片的尺寸,比如可能有大尺寸的图片,最好设置这两个参数。这两个参数只能优化内存占用,对下载和解码没有帮助。

2.如果要优化下载,需要把图片缓存在磁盘上,下次直接从磁盘读取,就像 web 缓存那样,缓存用三方插件:cached_network_image

listview优化方案:分帧上屏,简单来说就是占位和实际Widget的替换参考:ListView流畅度翻倍!!Flutter卡顿分析和通用优化方案 - 掘金
 

参考:
Flutter布局基础-基础部件(一)Assets, images, and icon_冒泡的嘟嘟的博客-CSDN博客

Flutter布局基础-基础部件(一)Assets, images, and icon_冒泡的嘟嘟的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/14240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

etcd入门和常用操作

概述 etcd 是一个高可用的分布式键值(key-value)数据库,采用了更为简洁的Raft共识算法来实现数据强一致。基于Go语言实现,主要用于共享配置和服务发现。 名称说明 名称说明etcd一种基于 raft 协议的分布式 kv 数据库&#xff0…

秋招算法备战第31天 | 贪心算法理论基础、455.分发饼干、376. 摆动序列、53. 最大子序和

贪心算法理论基础 贪心算法并没有固定的套路,唯一的难点就是如何通过局部最优,推出整体最优。如何验证可不可以用贪心算法呢?最好用的策略就是举反例,如果想不到反例,那么就试一试贪心吧。刷题或者面试的时候&#xf…

C语言指针详解

C语言指针详解 字符指针1.如何定义2.类型和指向的内容3.代码例子 指针数组1.如何定义2.类型和内容 数组指针1.如何定义2.类型和指向类型3.数组名vs&数组名数组指针运用 数组参数&指针参数一维数组传参二维数组传参一级指针传参二级指针传参 函数指针1.如何定义2.类型和…

Java ~ Collection/Executor ~ DelayQueue【总结】

前言 文章 相关系列:《Java ~ Collection【目录】》(持续更新)相关系列:《Java ~ Executor【目录】》(持续更新)相关系列:《Java ~ Collection/Executor ~ DelayQueue【源码】》(学…

transformer从开始到结束

首先输入是64 * 10的矩阵,代表64个句子,每个句子10个词。 X = self.positionalEncoding(self.embedding(X)*math.sqrt(self.num_hiddens))在经过embeddeding之后,变为64 * 10 *32 矩阵,每个词使用32维向量表示。然后将数据放入 X = encoder_block(X,valid_lens),这里我们将…

Elasticsearch笔记

迈向光明之路,必定荆棘丛生。 文章目录 一、Elasticsearch概述二、初识ES倒排索引1. 正向索引2. 倒排索引 三、ES环境搭建1. 安装单机版ES2. 安装Kibana3. 安装ik分词器3.1 在线安装ik插件3.2.离线安装ik插件(推荐方式)3.3 自定义词典 四、ES…

Unity XML2——C#读写XML

一、XML 文件的存放位置 (一)只读不写的 XML ​ 放在 Resouces 或者 StreamingAssets 文件夹下,详见 Unity基础3——Resources资源动态加载_weixin_53163894的博客-CSDN博客。 (二)动态存储的 XML ​ 放在 Applica…

Linux上定位线上CPU飙高

【模拟场景】 写一个java main函数,死循环打印 System.out.println(“111111”) , 将其打成jar包放在linux中执行 1、通过TOP命令找到CPU耗用最厉害的那个进程的PID 2、top -H -p 进程PID 找到进程下的所有线程 可以看到 pid 为 94384的线程耗用cpu …

redis相关异常之RedisConnectionExceptionRedisCommandTimeoutException

本文只是分析Letture类型的Redis 池化连接出现的连接超时异常、读超时异常问题。 1.RedisConnectionException 默认是10秒。 通过如下可以配置: public class MyLettuceClientConfigurationBuilderCustomizer implements LettuceClientConfigurationBuilderCusto…

VUE3-04

1. 编写代码过程中的问题与解决 1.1 错误:cant read property of undefined(name) (1)首先定位错误的位置 (2)逐一排查问题:注释代码;debugger;console.log (3&#xff0…

ComPDFKit PDF SDK库(支持Windows、Web、Android、iOS、Mac等平台)

ComPDFKit提供专业、全平台支持的PDF开发库,包括Windows、Mac、Linux、Android、iOS、Web平台。开发者可以快速、灵活整合PDF功能到各开发平台的软件、程序、系统中。丰富的功能,多种开发语言,灵活的部署方案可供选择,满足您对PDF…

数组传参,指针传参

文章目录 一维数组传参二维数组传参一级指针传参二级指针传参 一维数组传参 二维数组传参 一级指针传参 二级指针传参

基于stm32单片机的直流电机速度控制——LZW

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 一、实验目的二、实验方法三、实验设计1.实验器材2.电路连接3.软件设计(1)实验变量(2)功能模块a)电机接收信号…

AtCoder Beginner Contest 312(A~D)

A //语法题也要更仔细嘞&#xff0c;要不然也会wa #include <bits/stdc.h> // #pragma GCC optimize(3,"Ofast","inline") // #pragma GCC optimize(2) using namespace std; typedef long long LL; #define int LL typedef pair<int, int> …

代码随想录-回溯算法(分割问题)|ACM模式

目录 前言&#xff1a; 131. 分割回文串 题目描述&#xff1a; 输入输出描述&#xff1a; 思路和想法&#xff1a; 93. 复原 IP 地址 题目描述&#xff1a; 输入输出描述&#xff1a; 思路和想法&#xff1a; 前言&#xff1a; 回溯算法中的分割问题&#xff0c;是可以…

Java【Spring】项目创建、存储和获取 Bean 的基本方式

文章目录 前言一、创建 Spring 项目1, 创建 Maven 项目2, 添加 Spring 依赖3, 创建启动类 二、存储 Bean 的基本方式1, 创建 Bean2, 存储 Bean 三、获取 Bean 的基本方式1, 获取上下文对象2, 获取 Bean3, 使用 Bean 总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的…

Python基础入门教程(上)

目录 一、你好Python 1.1、Python安装 win版 Linux版 1.2、第一个Python程序 二、Python基本语法 2.1、字面量 2.2、注释 2.3、变量 2.4、数据类型 type()函数 字符串类型的不同定义方式 2.5、数据类型转换 ​编辑 2.6、标识符 2.7、运算符 2.8、字符串扩展 …

基于aarch64分析kernel源码 三:启动代码分析

一、内核启动入口点 /** Kernel startup entry point.* ---------------------------** The requirements are:* MMU off, D-cache off, I-cache on or off,* x0 physical address to the FDT blob.* 这部分注释说明了内核启动入口点的要求和约束条件。* 要求包括&…

Vue2基础五、工程化开发

零、文章目录 Vue2基础五、工程化开发 1、工程化开发和脚手架 &#xff08;1&#xff09;开发 Vue 的两种方式 核心包传统开发模式&#xff1a;基于 html / css / js 文件&#xff0c;直接引入核心包&#xff0c;开发 Vue。工程化开发模式&#xff1a;基于构建工具&#xf…

【Python】数据分析+数据挖掘——探索Pandas中的索引与数据组织

前言 在数据科学和数据分析领域&#xff0c;Pandas是一个备受喜爱的Python库。它提供了丰富的数据结构和灵活的工具&#xff0c;帮助我们高效地处理和分析数据。其中&#xff0c;索引在Pandas中扮演着关键角色&#xff0c;它是一种强大的数据组织和访问机制&#xff0c;使我们…