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.rhkb.cn/news/195861.html

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

相关文章

CentOS Linux release 7.9.2009 (Core)中安装配置Tomcat

一、安装JDK 部分内容可以参考我这篇文章:Windows11与CentOS7下配置与检测JDK与Maven环境变量 中的 2.2 安装jdk-8u371-linux-x64.tar.gz和配置环境变量/etc/profile //1、安装redhat-lsb yum install -y redhat-lsb//2、查看系统版本信息 lsb_release -a //3、查…

农户建档管理系统的设计与实现-计算机毕业设计源码20835

摘 要 随着互联网趋势的到来,各行各业都在考虑利用互联网将自己推广出去,最好方式就是建立自己的互联网系统,并对其进行维护和管理。在现实运用中,应用软件的工作规则和开发步骤,采用Java技术建设农户建档管理系统。 本…

interview review

M: gamma correction 人眼和相机对强度的变化敏感程序不一样, 人对暗部更敏感. 上面一条人眼觉得是均匀, 下面一条是相机真实的均匀. 人眼觉得的中间值 在相机中是21.8%, 为了让灰度的分布更符合人眼, 我们需要对图片进行gamma校正, 使得各用128个数字来表示相机真实世界中…

6.docker运行mysql容器-理解容器数据卷

运行mysql容器-理解容器数据卷 1.什么是容器数据卷2.如何使用容器数据卷2.1 数据卷挂载命令2.2 容器数据卷的继承2.3 数据卷的读写权限2.4 容器数据卷的小实验(加深理解)2.4.1 启动挂载数据卷的centos容器2.4.2 启动后,在宿主机的data目录下会…

【ARM Trace32(劳特巴赫) 使用介绍 2.1 -- TRACE32 Practice 脚本 cmm 脚本学习】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 上篇文章【ARM Trace32(劳特巴赫) 使用介绍 2 - Veloce 环境中使用trace32 连接 Cortex-M33】 下篇文章【ARM Trace32(劳特巴赫) 使用介绍 2.2 – TRACE32 进阶命令之 DIAG 弹框命令】 文章目录 1. TRACE32 Practice 语法1.…

云课五分钟-07安装Opera失败-版本不匹配

前篇: 云课五分钟-06一段代码调试debug-AI与人工 其中已经遇到了一些问题,在和文心一言交互过程中,由于提问不合适,得不到所期望的结果。 那么这一节本可以避免,但是为了展示失败,需要将过程录制。 视频…

Android——gradle插件配置方式——dependencies和plugins

引言 我们知道Android studio 需要gradle插件进行构建和编译,随着AGP的升级,引入gradle插件也发生了变化。旧版本通过build.gradle文件中dependencies代码块引入,新版本通过plugins代码块引入 一、旧版本引入方式dependencies 二、新版本引入…

【SpringMvc】SpringMvc +MyBatis整理

🎄欢迎来到边境矢梦的csdn博文🎄 🎄本文主要梳理 Java 框架 中 SpringMVC的知识点和值得注意的地方 🎄 🌈我是边境矢梦,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关…

YOLOv5 配置C2模块构造新模型

🍨 本文为[🔗365天深度学习训练营学习记录博客 🍦 参考文章:365天深度学习训练营 🍖 原作者:[K同学啊] 🚀 文章来源:[K同学的学习圈子](https://www.yuque.com/mingtian-fkmxf/zxwb4…

音频类型转换工具-可执行文件exe/dmg制作

朋友车载音乐需要MP3格式,想要个批量转换工具 准备工作 brew install ffmpeg --HEAD或者官网下载安装ffmpeg并配置环境conda install ffmpeg 或者pip install ffmpeg-python 音频类型转换程序.py文件 exe文件在windows下打包,dmg在macos下打包&#…

【数字人】7、GeneFace++ | 使用声音和面部运动系数的关系作为 condition 来指导 NeRF 重建说话头

文章目录 一、背景二、相关工作2.1 唇形同步的 audio-to-motion2.2 真实人像渲染 三、方法3.1 对 GeneFace 的继承3.2 GeneFace 的结构3.2.1 Pitch-Aware Audio-to-Motion Transform3.2.2 Landmark Locally Linear Embedding3.2.3 Instant Motion-to-Video Rendering 四、效果 …

Boolean源码解剖学

原创/朱季谦 有天突发其想,想看一下Boolean底层都做了些什么,故而去看了一番Boolean的源码,基于一些思考的基础上,输出了这篇文章。 一.类继承 Boolean的源码类定义部分如下: 1 public final class Boolean implemen…

HP惠普暗影精灵9笔记本电脑OMEN by HP Transcend 16英寸游戏本16-u0000原厂Windows11系统

惠普暗影9恢复出厂开箱状态,原装出厂Win11-22H2系统ISO镜像 下载链接:https://pan.baidu.com/s/17ftbBHEMFSEOw22tnYvPog?pwd91p1 提取码:91p1 适用型号:16-u0006TX、16-u0007TX、16-u0008TX、16-u0009TX、16-u0017TX 原厂系…

【docker启动的Jenkins时,遇到时区问题处理】

1、查看容器中的时区 [rootlocalhost jenkins]# docker exec -it jenkins cat /etc/timezone Etc/UTC而本地使用的是Asia/shanghai [rootlocalhost jenkins]# timedatectl | grep Time zoneTime zone: n/a (CST, 0800)###查看 [rootlocalhost jenkins]# cd /usr/share/zoneinf…

【数据结构(二)】稀疏 sparsearray 数组(1)

文章目录 1. 稀疏数组的应用场景1.1. 一个实际的需求1.2. 基本介绍 2. 稀疏数组转换的思路分析3. 稀疏数组的代码实现3.1. 二维数组转稀疏数组3.2. 稀疏数组转二维数组 4. 课后练习 1. 稀疏数组的应用场景 1.1. 一个实际的需求 问题:     编写的五子棋程序中&…

【VSCode】配置C/C++开发环境教程(Windows系统)

下载和配置MinGW编译器 首先,我们需要下载并配置MinGW编译器。 下载MinGW编译器,并将其放置在一个不含空格和中文字符的目录下。 配置环境变量PATH 打开控制面板。可以通过在Windows搜索栏中输入"控制面板"来找到它。 在控制面板中&#xf…

JavaScript 浮点数运算的精度问题及解决

JavaScript 浮点数运算的精度问题及解决 在 JavaScript 中整数和浮点数都属于 Number 数据类型,当浮点数做数学运算的时候,你经常会发现一些问题,举几个例子: 0.1 0.2 0.30000000000000004 console.log(0.1 0.2) 0.3000000…

vite+vue3+electron开发环境搭建

环境 node 18.14.2 yarn 1.22 项目创建 yarn create vite test01安装vue环境 cd test01 yarn yarn dev说明vue环境搭建成功 安装electron # 因为有的版本会报错所以指定了版本 yarn add electron26.1.0 -D安装vite-plugin-electron yarn add -D vite-plugin-electron根目…

关系代数、SQL语句和Go语言示例

近些年,数据库领域发展日新月异,除传统的关系型数据库外,还出现了许多新型的数据库,比如:以HBase、Cassandra、MongoDB为代表的NoSQL数据库,以InfluxDB、TDEngine为代表的时序数据[1]库,以Neo4J…

二分查找和二分答案

【深基13.例1】查找 题目描述 输入 n n n 个不超过 1 0 9 10^9 109 的单调不减的(就是后面的数字不小于前面的数字)非负整数 a 1 , a 2 , … , a n a_1,a_2,\dots,a_{n} a1​,a2​,…,an​,然后进行 m m m 次询问。对于每次询问&#x…