flutter背景图片设置

本地图片设置

1、在配置文件pubspec.yaml中,设置以下代码

assets:- assets/- assets/test/

2、如果目录中没有assets文件夹,则创建一个文件夹,并且取名为assets,在此文件夹中存放图片资源即可,如果想分文件夹管理,在assets目录下创建文件夹,并且在配置文件pubspec.yaml中加入路径即可
在这里插入图片描述

3、图片的使用、在界面文件中,有的需要设置图片大小,目前给出三种方式
(1)使用Container容器,对子类图片进行控制

Container(margin: EdgeInsets.only(right: 20, left: 10),width: 81,height: 64,child: Image.asset("assets/login/select.png"),)

(2)使用SizedBox容器,对子类图片进行控制

SizedBox(width: 81,height: 64,child: Image.asset("assets/login/select.png"),)

(3)使用Image组件,可以对图片进行颜色设置,大小控制

Image(width: 81,height: 64,image: AssetImage("assets/login/select.png"),)

背景设置

1、容器背景设置
容器的背景设置,只有Container容器可以设置背景,SizedBox是不行的,其他的应该也有的,目前就还没有用上。以下代码就是对容器增加背景图片。一般设置了image的话,可以不设置color。

Container(height: 327.w,width: double.infinity,child: _titleHeadhall(),//自定义的组件,背景之上的decoration: BoxDecoration(image: DecorationImage(image: AssetImage("assets/common/bg_home.png"),fit: BoxFit.fill),),)

2、按钮背景设置
这种方式,只能修改按钮的颜色,貌似是不能增加图片的,有大佬知道的话,可以留言告知一下,谢谢。

ElevatedButton(onPressed:  () {//按钮点击事件},child: Text("保存"),  //按钮显示文字style: ButtonStyle(backgroundColor: MaterialStatePropertyAll(Colors.orange),//颜色值shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10), // 圆角半径,四个角的弧度),),),)

(1)按钮不可以点击
在flutter4中,没有了isenable的值,我们使用另外一种方式,将按钮的点击事件设置为null,及可以使按钮不可以点击

ElevatedButton(onPressed: null,child: Text("保存"),style: ButtonStyle(backgroundColor: MaterialStatePropertyAll(Colors.orange),//颜色值shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10), // 圆角半径,四个角的弧度),),),)

可以设置图片的按钮

这是一种类似按钮的组件,可以进行点击响应事件,和按钮的不同,就是没有点击响应动画,不过这些都是可以自己添加的。

GestureDetector(onTap: () {},//点击响应事件child: Container(height: 327.w,width: double.infinity,child: _titleHeadhall(),//自定义的组件,背景之上的decoration: BoxDecoration(image: DecorationImage(image: AssetImage("assets/common/bg_home.png"),//容器的背景图片fit: BoxFit.fill),),),)

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

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

相关文章

c语言中,/100和/100.0的区别是什么?

c语言中,/100和/100.0的区别是什么? 应该是整数除法和浮点数除法的区别吧。/100 时,结果只会保留整数部分,余数会丢弃。 最近很多小伙伴找我,说想要一些c语言的资料,然后我根据自己从业十年经验&#xff0…

2023年亚太杯数学建模思路 - 复盘:人力资源安排的最优化模型

文章目录 0 赛题思路1 描述2 问题概括3 建模过程3.1 边界说明3.2 符号约定3.3 分析3.4 模型建立3.5 模型求解 4 模型评价与推广5 实现代码 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 描述 …

【Maven教程】(十一):使用 Maven 构建 Web应用 —— 使用 jetty-maven-plugin 进行测试、使用 Cargo 实现自动化部署~

Maven 使用 Maven 构建 Web应用 1️⃣ Web 项目的目录结构2️⃣ account-service2.1 account-service的 POM2.2 account-service 的主代码 3️⃣ account-web3.1 account-web 的POM3.2 account-web 的主代码 4️⃣ 使用 jetty-maven-plugin 进行测试5️⃣ 使用 Cargo 实现自动…

Bean生命周期

在上文中,我们了解了Spring中简单的获取Bean对象(对象装配)和Bean作用域,那么本文主要来带领大家走进Bean的生命周期! 所谓的生命周期指的是一个对象从诞生到销毁的整个生命过程,我们把这个过程叫做一个生…

为什么PDF文件不能打印?

正常的PDF文件是可以打印的,如果PDF文件打开之后发现文件不能打印,我们需要先查看一下自己的打印机是否能够正常运行,如果打印机是正常的,我们再查看一下,文件中的打印功能按钮是否是灰色的状态。 如果PDF中的大多数功…

大数据-之LibrA数据库系统告警处理(ALM-12048 网络写包错误率超过阈值)

告警解释 系统每30秒周期性检测网络写包错误率,并把实际错误率和阈值(系统默认阈值0.5%)进行比较,当检测到网络写包错误率连续多次(默认值为5)超过阈值时产生该告警。 用户可通过“系统设置 > 阈值配置…

虾皮之家数据分析插件:知虾数据分析工具提升销量的利器

在当今的电商市场中,虾皮Shopee成为了许多商家的首选平台。然而,随着竞争的加剧,店铺运营变得越来越具有挑战性。如何提升销量,优化标题和图片,合理设置SKU,并准确跟踪店铺活动数据和竞品数据,已…

【前沿学习】美国零信任架构发展现状与趋势研究

转自:美国零信任架构发展现状与趋势研究 摘要 为了应对日趋严峻的网络安全威胁,美国不断加大对零信任架构的研究和应用。自 2022 年以来,美国发布了多个零信任战略和体系架构文件,开展了多项零信任应用项目。在介绍美国零信任战略…

基于51单片机电子钟温度计数码显示设计( proteus仿真+程序+设计报告+讲解视频)

这里写目录标题 ✅1.主要功能:✅讲解视频:✅2.仿真设计✅3. 程序代码✅4. 设计报告✅5. 设计资料内容清单&&下载链接✅[资料下载链接:](https://docs.qq.com/doc/DS0Nja3BaQmVtWUpZ) 基于51单片机电子钟温度检测数码显示设计( proteu…

easyExcle单元格合并

自定义单元格合并策略: /*** 自定义单元格合并策略** create: 2023-11-15 13:41**/ Data NoArgsConstructor AllArgsConstructor Slf4j public class EasyExcelCustomMergeStrategy implements RowWriteHandler {/*** 总数*/private Integer totalNum;//合并行计数…

Power Automate-创建自定义连接器

点击左侧导航栏,更多,点击全部发现 点击下方的自定义连接器 点击从空白创建 注意命名要用英文 常规信息中可以上传连接器icon、写一些说明 方案是观察接口地址前面的文本,主机是下方接口地址中蓝色框中的内容 点击下一步,根据API自…

gdb详解【Linux知识贩卖机】

你背朝太阳,就只能看到自己的影子。 --纪伯伦语录 文章目录 简介准备常用命令查看代码(list)运行(run)打断点(break)逐语句(step)逐过程(next)完成…

C# 使用Microsoft.Office.Interop.Excel库操作Excel

1.在NuGet管理包中搜索:Microsoft.Office.Interop.Excel,如下图红色标记处所示,进行安装 2. 安装完成后,在程序中引入命名空间如下所示: using Microsoft.Office.Interop.Excel; //第一步 添加excel第三方库 usi…

人格障碍在线测试,人格障碍筛查和判断 PDQ-4+

每个人都是独一无二的,每个人都存在人格上的偏差,日常生活中我们携带着自己的人格在忙碌,在不够成对学习、生活和工作的影响下,我们认为都是健康的人格,反之则属于人格障碍。 人格障碍给我们的日常生活带来极大的影响…

打开PDF文件之后不能编辑,有哪些原因?

打开PDF文件之后发现没有办法编辑PDF文件,都有哪些原因呢? 首先我们可以考虑一下,PDF文件中的内容是否是图片,如果确认是图片文件,那么我们想要编辑,就可以先使用PDF编辑器中的OCR扫描功能,将图…

如何通过 wireshark 捕获 C# 上传的图片

一:背景 1. 讲故事 这些天计划好好研究下tcp/ip,以及socket套接字,毕竟工控中设计到各种交互协议,如果只是模模糊糊的了解,对分析此类dump还是非常不利的,而研究协议最好的入手点就是用抓包工具 wireshar…

一加手机全球摄影展深圳开展 历年获奖作品齐登场

11 月 18 日至 12 月 3 日,一加手机将携手国际摄影奖(International Photography Awards,以下简称IPA),在深圳市南山区海岸城购物中心举办一加手机全球摄影展(OnePlus Global Photography Exhibition&#…

容联云发布生成式应用,让每个企业都拥有大模型沟通能力

基于容联云自主研发的赤兔大模型能力,容联云容犀机器人真正将大模型强大的理解能力、知识学习能力、总结能力、挖掘能力、推理能力融入于实际落地应用中。 开创性的打造生成式场景化智能问答、生成式智能辅助、AI运营话术库,帮助企业洞悉更精准的客户真…

Ubuntu 22.04 LTS ffmpeg mp4 gif 添加图片水印

ffmpeg编译安装6.0.1,参考 Ubuntu 20.04 LTS ffmpeg gif mp4 互转 许编译安装ffmpeg ;解决gif转mp4转换后无法播放问题-CSDN博客 准备一个logo MP4添加水印 ffmpeg -i 2.mp4 -vf "movielogo.png[watermark];[in][watermark]overlayx10:y10[out]&…