flutter背景图片设置

这篇具有很好参考价值的文章主要介绍了flutter背景图片设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本地图片设置

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

assets:
    - assets/
    - assets/test/

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

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), // 圆角半径,四个角的弧度
          ),
        ),
      ),
    )

可以设置图片的按钮

这是一种类似按钮的组件,可以进行点击响应事件,和按钮的不同,就是没有点击响应动画,不过这些都是可以自己添加的。文章来源地址https://www.toymoban.com/news/detail-767160.html

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),
	    ),
	  ),
    )

到了这里,关于flutter背景图片设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序背景图片设置方法

    3、利用image标签做到设置背景图片 思路:我们只要利用css中的z-index改变层级既可做到变成背景图的样子 看代码 wxml: wxss: 这样我们也可以做到背景图的效果。 相关推荐:小程序开发教程 以上就是小程序背景图片设置方法的详细内容,更多请关注群英网络其它相关文章!

    2024年02月07日
    浏览(61)
  • Uniapp设置页面的背景图片

    设置背景有两种 注意一个是全背景设置,一个是在相应的view内设置背景 这是设置大背景 这是在相应的view内设置view块的背景

    2024年02月08日
    浏览(40)
  • 微信小程序背景图片设置

    问题  :微信小程序通过css:background-image引入背景图片失败 [渲染层网络层错误] pages/wode/wode.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用image/标签 解决方法微信小程序在使用background-image设置背景图时报错:渲染层网络层错误_index.wxss 中的

    2024年02月04日
    浏览(59)
  • 微信小程序 背景图片设置

            微信小程序设置背景图片时,有两种方法:         第一:直接在.wxss中中使用 “background-image:url()” 设置背景图片,但是这种加载背景图片的方法存在一个问题,就是所加载的图片只能是 网络图片 或 base64 图片,是不可以加载本地图片的。 但是使用base64图片

    2024年02月11日
    浏览(65)
  • CSS-设置背景图片的大小

    要设置背景图片的大小,您可以使用CSS的 background-size 属性。这个属性允许您指定背景图片的尺寸。 background-size 属性可以接受不同的值,包括: auto :保持原始图片的尺寸。 cover :将图片缩放到完全覆盖背景区域,可能会裁剪部分图片。 contain :将图片缩放到完全适应背景

    2024年01月25日
    浏览(47)
  • QT设置widget背景图片

    首先说方法,在给widget或者frame或者其他任何类型的控件添加背景图时,在样式表中加入如下代码,指定某个控件,设置其背景。 如果单纯改变样式表,没有指定控件的话,内部的其他控件背景也会改变。 特别提醒:类名 # 控件名,其中控件名要准确,假如你把widget的名字改

    2024年02月11日
    浏览(47)
  • 【微信小程序】不支持使用本地图片设置背景图片解决方法

    在小程序样式文件中,如果设置背景图片的路径用的是本地的,就会报错并且显示不出来;如果在wxml文件中使用图片的本地路径作为背景图,则微信开发者工具中可以显示出来,但是运行到手机上显示不出来,解决方法如下: 方法一: 使用网络图片 方法二: 在线搜索图片

    2024年02月11日
    浏览(91)
  • 全网最细JAVA窗口背景图片设置

     一.通过重写paint()方法设置背景图片 1.首先建立保存图片的文件夹,如下图所示建立文件夹; 2.在左侧找到你所建立的文件夹名称,然后把需要设置的背景图片复制进去  3.建立窗口,重写paint方法,绘制图片 4.建立工具类 5.效果如图所示 二.通过Jlabel()文本,设置背景图片

    2024年02月11日
    浏览(49)
  • RN 设置背景图片(使用ImageBackground组件)

     在RN版本0.46版本的时候添加了ImageBackground控件。ImageBackground可以设置背景图片,使用方法和image一样,里面嵌套了其他的组件     参考链接: https://www.reactnative.cn/docs/imagebackground https://chat.xutongbao.top/ 

    2024年02月15日
    浏览(37)
  • Visual Studio中如何设置背景图片,壁纸

    学习编程是一个漫长的过程,设置一个自己喜欢的背景图片,可以给我们的学习过程添加一些乐趣。 下面是效果图 目录 1.在扩展中下载ClaudialDE 2.设置背景图片 3.隐藏窗口  3.或使窗口透明 4.修改注释颜色 扩展—管理扩展  在右边搜索框内搜索background,下载第一个ClaudialDE和

    2023年04月26日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包