当前位置：首页 > news >正文

flutter背景图片设置

news 2025/8/8 13:31:21

本地图片设置

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