flutter - 如何在颤动中为 FadeInImage.assetNetwork 图像赋予圆角矩形?
问题描述
您好我正在使用 FadeInImage.assetNetwork 来显示我的图像。但是无论我尝试什么,我都没有得到圆角矩形边框。我尝试了 Clipperrect,但图像没有被剪裁,但卡片被剪裁了。我什至尝试将 FadeInImage.assetNetwork 包装在 CLipperect 中,并尝试包装在容器中并进行装饰,例如this.But 似乎没有什么能给出预期的结果。
简而言之,图像没有被剪裁,但卡片被剪裁了。我们如何解决这个问题?
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
Container(
height: MediaQuery.of(context).size.height * 0.27,
color: Colors.black,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: __moviesMovieId.length,
itemBuilder: (BuildContext context, int index) => Card(
margin: const EdgeInsets.fromLTRB(0, 0, 15, 0),
child: FadeInImage.assetNetwork(
width: MediaQuery.of(context).size.width * 0.3,
image:
'https://img.youtube.com/vi/${__moviesMovieId[index].substring(8)}/0.jpg',
placeholder: cupertinoActivityIndicator,
fit: BoxFit.fill,
),
),
),
),
解决方案
PhysicalModel(
clipBehavior: Clip.antiAliasWithSaveLayer,
color: Colors.black,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(30),
child: FadeInImage.assetNetwork(
width: MediaQuery.of(context).size.width * 0.3,
image:
'https://img.youtube.com/vi/${__moviesMovieId[index].substring(8)}/0.jpg',
placeholder: "hey",
fit: BoxFit.fill,
),
),
将您的 Card 从 ListView Builder 替换为此,绝对可以正常工作。上面的其他答案在我的设备中不起作用,所以我回答了。如果有帮助,请将其标记为答案
推荐阅读
- vim - 重新映射
休息 vim 中的映射 - tableau-api - 如何将自定义 SQL 与 [其他 jdbc] 一起用于 hdp3.1 上的画面
- postgresql - Postgres 没有这样的接口 'org.freedesktop.DBus.Properties'
- css - 如何使用 CSS 选择器删除标签中的文本(无标签)?
- c# - 如何使用 wpf 后面的代码从本地数据库(sqlite)中删除数据?
- ios - 使用 SwiftyJSON 进行 JSON 初始化期间的内存泄漏
- c# - 如何从 API 反序列化这个 JSON 字符串(数组数组)
- vue.js - Router-View 标记不使用 beforeEach() 显示内容
- python-2.7 - Python 2.7 读取文本文件中的每一行直到字符
- java - 在图像顶部在android中绘制一条丝带