flutter Stack 绝对布局的使用
2024-10-12 10:02:28
使用stack 和Positioned
实现绝对布局 进行位置偏移
Container(
alignment: Alignment.center,
width: double.infinity,
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
width: 40,
height: 40,
margin: EdgeInsets.fromLTRB(0, 0, 90, 0),
decoration: BoxDecoration(
border: Border.all(width: 2,color: Colors.white),
borderRadius: BorderRadius.circular(20)),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: CachedNetworkImage(
//图片缓存
imageUrl:
'http://img.crcz.com/allimg/202002/29/1582979072845574-lp.jpg',
progressIndicatorBuilder:
(context, url, downloadProgress) =>
CircularProgressIndicator(
value: downloadProgress.progress),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
), Positioned(
left: 30,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
border: Border.all(width: 2,color: Colors.white),
borderRadius: BorderRadius.circular(20)),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: CachedNetworkImage(
//图片缓存
imageUrl:
'https://img2.woyaogexing.com/2021/01/27/76d0ec1087f944d286031185a97ab13b!400x400.jpeg',
progressIndicatorBuilder:
(context, url, downloadProgress) =>
CircularProgressIndicator(
value: downloadProgress.progress),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
),
),
Positioned(
left: 60,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
border: Border.all(width: 2,color: Colors.white),
borderRadius: BorderRadius.circular(20)),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: CachedNetworkImage(
//图片缓存
imageUrl:
'https://img2.woyaogexing.com/2021/01/27/e964deb7eadb437aad814b1ee46a8c50!400x400.jpeg',
progressIndicatorBuilder:
(context, url, downloadProgress) =>
CircularProgressIndicator(
value: downloadProgress.progress),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
),
),
Positioned(
left: 90,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
border: Border.all(width: 2,color: Colors.white),
borderRadius: BorderRadius.circular(20)),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: CachedNetworkImage(
//图片缓存
imageUrl:
'https://img2.woyaogexing.com/2021/01/26/4e4643708cb7430aafecf59574beea5e!400x400.jpeg',
progressIndicatorBuilder:
(context, url, downloadProgress) =>
CircularProgressIndicator(
value: downloadProgress.progress),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
),
),
],
),
),
最新文章
- Android（1）—Mono For Android 环境搭建及破解
- Android开发学习—— activity
- Knockout学习笔记之二（$root，$parent及$data的区别）
- Spring常用的接口和类（二）
- html ul 里 能放其他标签吗，比如h3、p？
- Css3_写出小广播样子
- java.net.ServerSocket和java.net.Socket
- Linux权限体系总结
- jQuery firefox chrome IE 绑定mousewheel事件
- QT学习篇：入门（1）
- WPFS数据绑定（要是后台类对象的属性值发生改变，通知在“client界面与之绑定的控件值”也发生改变须要实现INotitypropertyChanged接口）
- Mybatis 的Log4j日志输出问题 - 以及有关日志的所有问题
- Android仿WIN8系统磁贴点击下沉倾斜效果
- 关于变量 Objects...objects 和Object[] objects的区别
- 【收藏】Web前端开发第三方插件大全
- HDU 1562 Oil Deposits
- 将外部dwg图纸中指定带属性的块插入到当前图纸中
- Android使用google breakpad捕获分析native cash
- return和throw某些特性相似
- [LeetCode] Flatten a Multilevel Doubly Linked List 压平一个多层的双向链表
热门文章
- java helloworld demo
- 联邦GNN综述与经典算法介绍
- P31_全局配置 - window - 设置上拉触底的距离
- react 高效高质量搭建后台系统 系列 —— 前端权限
- 使用Hook拦截sendto函数解决虚拟局域网部分游戏联机找不到房间的问题——以文明6为例
- Spring Cloud Openfeign Get请求发生405错误
- 安卓逆向 ARM基础篇
- idea+git+gitee的使用
- 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试
- [转载]pytest报AttributeError: module ‘pytest‘ has no attribute ‘main‘