Flutter图片控件(七)

server/2024/11/29 13:52:40/

1、加载图片

import 'package:flutter/material.dart';void main() {runApp(const MaterialApp(home: MyHomePage(),));
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Center(child: Text("图片控件")),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 静态引入方式1const Image(image: AssetImage("assets/imgs/touxiang.jpg"),width: 100.0,),const SizedBox(height: 10.0),// 静态引入方式2Image.asset("assets/imgs/touxiang.jpg",width: 50.0,),const SizedBox(height: 10.0,),// 从网络加载图像const Image(image: NetworkImage("https://cdn.jsdelivr.net/gh/Justinc-github/images/touxiang.jpg"),width: 100.0,)],),),);}
}
  • 效果图:

引入图片

2、图片参数

const Image({super.key,required this.image,this.frameBuilder,this.loadingBuilder,this.errorBuilder,this.semanticLabel,this.excludeFromSemantics = false,this.width,this.height,this.color,this.opacity,this.colorBlendMode,this.fit,this.alignment = Alignment.center,this.repeat = ImageRepeat.noRepeat,this.centerSlice,this.matchTextDirection = false,this.gaplessPlayback = false,this.isAntiAlias = false,this.filterQuality = FilterQuality.medium,});
  • super.key:指定Image组件的标识,不指定自动生成一个标识符;
  • image:必选参数,它是一个ImageProvider对象,用于指定要显示的图片;
  • frameBuilder:在图片加载时显示一个自定义框架;
  • loadingBuilder:在图片加载时显示自定义加载指示器;
  • errorBuilder:在图片加载时显示一个自定义错误提示;
  • semanticLabel:为图片提供语义标签;
  • excludeFromSemantics:默认为false,设置为true图片将被排除在语义树之外,屏幕阅读器等辅助技术将不会读取它;
  • width:指定图片的宽;
  • height:指定图片的高;
  • color:用于给图片着色;
  • opacity:控制图片的透明度;
  • colorBlendMode:可选枚举值,指定颜色混合模式;
  • fit:可选枚举值。用于控制图片如何适应仪器,
    • fill:填充父容器所有空间;
    • cover:按照宽高比方法,超出部分会被裁掉;
    • contain:按照长宽自适应当前父容器大小;
    • fitWidth:缩放当前图片至显示空间的宽度,高度按比例缩放,然后居中显示;
    • fitHeight:缩放当前图片至显示空间的高度,宽度按比例缩放,然后居中显示;
    • none:没有适应,图片中间显示在控件内,超出部分会被剪裁。
  • alignment:可选对齐方式,默认为Alignment.center;
  • repeat:可选枚举值,指定图片是否重复显示,如何重复;
  • centerSlice:这是一个可选的Rect对象,指定如片中心切片区域,以便缩放时不会失真;
  • matchTextDirection:默认为false,设置为true时,方向取决于文本方向;
  • gaplessPlayback:默认为false,设置为true时,图片将在重新加载时无缝播放,不会出现闪烁;
  • isAntiAlias:默认为false,设置为true时,图片将使用抗锯齿基础,以减少边缘锯齿;
  • filterQuality:枚举值,默认为FilterQuality.medium,指定图片的过滤数量。
// 以fitshu'xingimport 'package:flutter/material.dart';void main() {runApp(const MaterialApp(home: MyHomePage(),));
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("图片控件"),),body: const Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.fill,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.cover,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.contain,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.fitWidth,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.fitHeight,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.none,),),],),));}
}image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.none,),),],),));}
}

http://www.ppmy.cn/server/137616.html

相关文章

不适合的学习方法

文章目录 不适合的学习方法1. 纯粹死记硬背2. 过度依赖单一资料3. 线性学习4. 被动学习5. 一次性学习6. 忽视实践7. 缺乏目标导向8. 过度依赖技术9. 忽视个人学习风格10. 过于频繁的切换 结论 以下是关于不适合的学习方法的更详细描述,包括额外的内容和相关公式&…

【Spring源码核心篇-01】精通Spring的bean的生命周期

Spring源码核心篇整体栏目 内容链接地址【一】Spring的bean的生命周期https://zhenghuisheng.blog.csdn.net/article/details/143441012 spring的bean的生命周期 一,spring中bean的生命周期1,生成BeanDefinition1.1,初始化context和BeanFacto…

练习LabVIEW第二十六题

学习目标: 刚学了LabVIEW,在网上找了些题,练习一下LabVIEW,有不对不好不足的地方欢迎指正! 第二十五题: (1)显示一个二维数组的行数和列数; (2)查找一个二维数组中最大值,以及最大值在数组中…

网站安全,WAF网站保护暴力破解

雷池的核心功能 通过过滤和监控 Web 应用与互联网之间的 HTTP 流量,功能包括: SQL 注入保护:防止恶意 SQL 代码的注入,保护网站数据安全。跨站脚本攻击 (XSS):阻止攻击者在用户浏览器中执行恶意脚本。暴力破解防护&a…

SpringMVC学习(1)

目录 一、什么是SpringMVC 二、中心控制器(DispatcherServlet) 三、SpringMVC的执行原理 一、什么是SpringMVC 是Spring Framework的一部分,是基于Java实现MVC的轻量级Web框架 特点: 1、轻量级,简单易学 2、高效…

docker 安装 PostgreSQL

参考链接 https://hub.docker.com/_/postgres 安装 # 后台运行,镜像名称为 postgres # --name postgres 容器名称为 postgres # POSTGRES_PASSWORD 超级用户的密码,超级用户名默认为:postgres,可以使用 POSTGRES_USER 环境变量设…

Knowledge-refined Denoising Network for Robust Recommendation

Knowledge-refined Denoising Network for Robust Recommendation(Sigir23) 摘要 知识图(KG)包含丰富的边信息,是提高推荐性能和可解释性的重要组成部分。然而,现有的知识感知推荐方法直接在KG和用户-项目…

基于Python大数据的王者荣耀战队数据分析及可视化系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…