flutter背景图片设置

news2024/11/20 11:23:37

本地图片设置

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.coloradmin.cn/o/1210188.html

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

相关文章

golang中context使用总结

一、context使用注意事项 在使用context时,有一些需要注意的事项,以及一些与性能优化相关的建议: 避免滥用context传递数据:context的主要目的是传递请求范围的数据和取消信号,而不是用于传递全局状态或大量数据。滥用…

ElasticSearch 增删改查操作

本文主要是介绍 ElasticSearch 的文档增删改查和批量操作,同时会介绍一些 REST API 返回状态码的具体含义。 我们先来看下这个表: 这个表包含了 Index、Create、Read、Update、Delete 这五种方法,我们先来看下 CRUD 操作的 HTTP 请求都长什么…

美团拼图滑块

有时候放弃也是一种智慧。 就像这说的一样,美团的拼图滑块,不知道这个缺口该怎么去处理,正常划顶到最外面去了,所以就不知道这个是咋计算的。 先来看看他的这个加密,跟原来的一划到底其实是一样的,难度只是…

php+vue3实现点选验证码

buildadmin 中的点选验证码实现 验证码类 <?phpnamespace ba;use Throwable; use think\facade\Db; use think\facade\Lang; use think\facade\Config;/*** 点选文字验证码类*/ class ClickCaptcha {/*** 验证码过期时间(s)* var int*/private int $expire 600;/*** 可以…

萌宠俱乐部

一、html代码 二、CSS代码 三、效果图 四、继续努力呀&#xff01;&#xff01;&#xff01; 一、html代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"wi…

如何使用线性模型的【分箱】操作处理非线性问题

让线性回归在非线性数据上表现提升的核心方法之一是对数据进行分箱&#xff0c;也就是离散化。与线性回归相比&#xff0c;我们常用的一种回归是决策树的回归。为了对比不同分类器和分箱前后拟合效果的差异&#xff0c;我们设置对照实验。 生成一个非线性数据集前&#xff0c;…

Java计算数据百分比

public class CalculatePCT {public static void main(String[] args) {System.out.println(getPercent(9, 100));System.out.println(getPercent2(3, 7));}/*** 方式一&#xff1a;使用java.text.NumberFormat实现*/public static String getPercent(int x, int y) {double d1…

ACM练习——第二天

今天又是一天课&#xff0c;满课&#xff0c;很累哈&#xff0c;计组真的挺难的&#xff0c;但是多学学还是可以学明白。行吧&#xff0c;继续进入今天的ACM练习&#xff0c;现阶段都是主要练习Java到C的语言过渡。 因为今天的题目多半都是昨天的延伸&#xff0c;我就不提供Jav…

Java主流分布式解决方案多场景设计与实战

Java的主流分布式解决方案的设计和实战涉及到多个场景&#xff0c;包括但不限于以下几点&#xff1a; 分布式缓存&#xff1a;在Java的分布式系统中&#xff0c;缓存是非常重要的一部分。常用的分布式缓存技术包括Redis、EhCache等。这些缓存技术可以用来提高系统的性能和响应…

2023软件测试面试跳槽必备

你眼中的软件测试岗位是怎样的&#xff1f;大部分人可能会给出这样的回答&#xff1a;“测试&#xff1f;简单啊&#xff0c;没什么技术含量&#xff0c;无非就是看需求、看业务手册、看设计文档、然后点点功能是否实现&#xff0c;麻烦点的就是测试下部署安装是否出现兼容性问…

开讲:长江航道工程局举办首届云表无代码培训班

11月9日至10日&#xff0c;公司联合珠海乐图软件有限公司在总部机关举办了首届云表无代码编程开发初级培训班。公司所属单位工程、成本、财务等相关业务部门及项目部管理人员参加培训&#xff0c;公司总工程师张晏方作开班动员讲话。 张晏方指出&#xff0c;公司自主开发的云表…

java生成docx文档, docx文档动态饼图

背景: 最近接了个需求, 要求生成日报, 大概如下图所示: 其中*表示变量, 看到要动态生成doc给我难受坏了,为什么会有这种需求? 然后看到里面还要动态生成饼图, oh, no.........没有办法, 硬着头皮上吧. 于是就搜了下java生成docx的方式, 看到的, 比较靠谱的一种通过freemake…

【每日一题】1334. 阈值距离内邻居最少的城市-2023.11.14

题目&#xff1a; 1334. 阈值距离内邻居最少的城市 有 n 个城市&#xff0c;按从 0 到 n-1 编号。给你一个边数组 edges&#xff0c;其中 edges[i] [fromi, toi, weighti] 代表 fromi 和 toi 两个城市之间的双向加权边&#xff0c;距离阈值是一个整数 distanceThreshold。 …

[Linux] ssh远程访问及控制

一、ssh介绍 1.1 SSH简介 SSH&#xff08;Secure Shell&#xff09;是一种安全通道协议&#xff0c;主要用于实现远程登录、远程复制等功能的字符接口。SSH 协议包括用户在登录时输入的用户密码、双方之间的通信。 加密数据传输&#xff0c;SSH 是一种建立在应用层和传输层上…

<MySQL> 查询数据进阶操作 -- 聚合查询

目录 一、聚合查询概述 二、聚合函数查询 2.1 常用函数 2.2 使用函数演示 2.3 聚合函数参数为*或列名的查询区别 2.4 字符串不能参与数学运算 2.5 具有误导性的结果集 三、分组查询 group by 四、分组后条件表达式查询 五、MySQL 中各个关键字的执行顺序 一、聚合查询…

【2013年数据结构真题】

highlight: a11y-dark 41题 王道解析&#xff1a; 算法的策略是从前向后扫描数组元素&#xff0c;标记出一个可能成为主元素的元素Num 。然后重新计数&#xff0c;确认Num是否是主元素。算法可分为以下两步&#xff1a; 选取候选的主元素&#xff1a;依次扫描所给数组中的每个…

【数据结构 | 链表】leetcode 2. 两数相加

个人主页&#xff1a;兜里游客棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里游客棉花糖 原创 收录于专栏【LeetCode】 原题链接&#xff1a;点击直接跳转到该题目 目录 题目描述解题代码 题目描述 给你两个 非空 的链表&#xff0c;表示两个非…

降低城市内涝风险,万宾科技内涝积水监测仪的作用

频繁的内涝会削弱和损坏城市的关键基础设施&#xff0c;包括道路、桥梁和公用设施。城市内涝风险降低可以减少交通中断事件&#xff0c;也可以保护居民安全并降低路面维修等成本&#xff0c;进一步确保城市基本服务继续发挥作用。对城市可持续发展来讲有效减少内涝的风险是重要…

ESP32网络开发实例-将DS18B20传感器读数发送到InfluxDB

将DS18B20传感器读数发送到InfluxDB 文章目录 将DS18B20传感器读数发送到InfluxDB1、InfluxDB、DS18B20介绍2、软件准备3、硬件准备4、代码实现在本文中,我们将介绍如何将 DS18B20传感器读数发送到 InfluxDB 时间序列数据库。 使用 InfluxDB 数据库的一大特点是可以在确定的时…

python 爬虫之requests 库以及相关函数的详细介绍

get 函数 当你使用 requests.get 函数时&#xff0c;你可以按照以下步骤来发起一个 GET 请求&#xff1a; 导入 requests 模块&#xff1a; 在你的 Python 脚本或程序中&#xff0c;首先导入 requests 模块。 import requests指定目标 URL&#xff1a; 设置你要请求的目标 URL…