Flutter加载图片的多样玩法汇总
作者:FranzLiszt1847 时间:2023-08-24 09:48:22
加载本地图片
在项目目录下创建assets文件夹,再在其文件夹下创建images文件夹,后面将需要的图片复制到其中即可
在pubspec.yaml文件中添加引用
flutter:
uses-material-design: true
assets:
- assets/images/
在Container中加载本地图片
Container(
width: 400.0,//容器宽度
height: 100.0,//容器高度
margin: const EdgeInsets.all(10.0),
child: Image.asset('assets/images/bg.jpg'),
),
圆角本地图片
效果图
代码
Container(
decoration: ShapeDecoration(
image: const DecorationImage(
image: AssetImage('assets/images/bg.jpg'),//加载本地图片
fit: BoxFit.cover
),
shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(10.0))
),
width: 400.0,//容器宽度
height: 100.0,//容器高度
margin: const EdgeInsets.all(10.0),//外边距
)
加载网络图片-本地图片占位图
在网络图片未加载出来时,显示本地图片,当网络图片返回时替换本地图片并展示一个深入浅出的动画,如果加载错误,则显示错误图
Container(//使用本地的图片作为占位图
width: 500.0,//容器宽度
height: 200.0,//容器高度
child: FadeInImage.assetNetwork(
placeholder: "assets/images/bg.jpg", //默认占位图
imageErrorBuilder: (context, error, stackTrace) {//如果加载网络错误,显示错误背景
return Container(
width: 500.0,
height: 200.0,
color: Colors.grey,
);
},
image: "https://i0.hdslb.com/bfs/album/85dcfb9ae68ec58b447d823448b27f26e3d69b23.jpg"),
),
加载网络图片-loading
效果
代码
当网络图片未加载完成时,显示loading动画,直到加载完成
Container(//使用加载loading作为占位图
width: 500.0,
height: 150.0,
margin: const EdgeInsets.only(top: 10.0),
child: Image.network(
"https://i0.hdslb.com/bfs/album/85dcfb9ae68ec58b447d823448b27f26e3d69b23.jpg",
errorBuilder: (context,error,stackTrace){
return CircularProgressIndicator();
},
loadingBuilder: (context,child,loadingProgress){
if(loadingProgress == null)return child;
return Container(
alignment: Alignment.center,
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null ?
loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null,
),
);
},
),
),
圆角、边框、渐变
BoxDecoration | 解释 |
---|---|
color | 背景颜色 |
image | 背景图片 |
border | 边框 |
borderRadius | 圆角 |
gradient | 渐变 |
shape | 形状 |
Container( //单组件布局容器,只允许有一个子组件
alignment: Alignment.center,//对齐方式:居中
width: 500.0,//容器宽度
height: 200.0,//容器高度
//color: Colors.blue,容器背景颜色
padding: const EdgeInsets.all(10.0),//外边距
margin: const EdgeInsets.all(10.0),//内边距
decoration: BoxDecoration(//类似原生Android的XML创建样式一样
gradient: const LinearGradient(colors: [Colors.red,Colors.green,Colors.amber]),//线性渐变,需要先注释原有存在的背景颜色语句
border: Border.all(color:Colors.black,width: 5.0),//绘制边框,边框颜色为黑色,边框宽度为5
borderRadius: const BorderRadius.all(Radius.circular(10.0)),//设置边框圆角
shape: BoxShape.rectangle//盒子样式形状
),
child: const Text(容器内子组建
'Hello World!',
style: TextStyle(fontSize: 20.0,color: Colors.white),
),
),
内边距和外边距使用如下:
padding: const EdgeInsets.all(10.0),//外边距
margin: const EdgeInsets.all(10.0),//内边距
来源:https://blog.csdn.net/News53231323/article/details/127659871
标签:flutter,加载,图片
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
基于opencv实现车道线检测
2023-03-11 10:07:52
![](https://img.aspxhome.com/file/2023/1/127531_0s.jpg)
C++常见错误中英文对照表
2023-06-05 04:52:13
Java操作Excel的示例详解
2021-07-08 00:56:56
![](https://img.aspxhome.com/file/2023/2/125662_0s.png)
Java数据结构之基于比较的排序算法基本原理及具体实现
2022-05-16 08:41:53
![](https://img.aspxhome.com/file/2023/2/128922_0s.png)
Flutter手机权限检查与申请实现方法详解
2022-01-15 23:52:38
![](https://img.aspxhome.com/file/2023/5/138395_0s.png)
C#带你玩扫雷(附源码)
2021-11-04 05:54:23
![](https://img.aspxhome.com/file/2023/8/70398_0s.png)
C#微信开发之接收 / 返回文本消息
2021-08-21 14:37:11
![](https://img.aspxhome.com/file/2023/1/92981_0s.png)
有关tomcat内存溢出的完美解决方法
2023-09-18 09:02:25
Java实现双色球抽奖随机算法示例
2023-04-25 12:15:38
android自由改变Dialog窗口位置的方法
2021-09-13 04:19:04
Java中使用开源库JSoup解析HTML文件实例
2023-10-18 11:46:16
Java 8中字符串拼接新姿势StringJoiner详解
2022-03-09 03:00:28
Spring Boot + Vue 前后端分离项目如何踢掉已登录用户
2021-07-23 21:57:35
![](https://img.aspxhome.com/file/2023/6/99716_0s.png)
Android实现背景颜色滑动渐变效果的全过程
2021-08-28 09:23:51
![](https://img.aspxhome.com/file/2023/0/138580_0s.gif)
C#异步下载文件
2021-10-05 03:23:40
![](https://img.aspxhome.com/file/2023/8/94598_0s.jpg)
Android 基于Bitmap的四种图片压缩方式
2022-06-13 11:50:21
![](https://img.aspxhome.com/file/2023/7/120177_0s.jpg)
基于javaMybatis存进时间戳的问题
2023-11-29 02:55:51
基于FeignException$InternalServerError的解决方案
2023-04-25 15:50:45
![](https://img.aspxhome.com/file/2023/2/60492_0s.png)
在Ubuntu中安装VSCode并配置C/C++开发环境的方法步骤
2021-07-04 18:19:19
spring-boot-maven-plugin:打包时排除provided依赖问题
2023-07-18 02:12:11
![](https://img.aspxhome.com/file/2023/5/72545_0s.png)