flutter - 带有透明图标的剪辑容器
问题描述
我想知道实现右下角圆形图标按钮效果的最佳方法是什么。
请注意图标是透明的并显示图像背景。
我尝试使用Stack
小部件,但无法正确定位它,也无法使颜色透明。
目前我有这个:
class Banner extends StatelessWidget {
final String src;
const Banner(this.src, {Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 16 / 9,
child: Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Stack(
children: <Widget>[
Image.network(src),
LayoutBuilder(
builder: (context, constraints) {
var calculatedOverlay = constraints.maxHeight / 3;
return Align(
alignment: Alignment.bottomRight,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(calculatedOverlay),
),
color: Colors.white,
),
height: calculatedOverlay,
width: calculatedOverlay,
),
);
},
),
],
),
),
Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
),
),
]),
);
}
}
结果是:
提前致谢。
解决方案
推荐阅读
- solidity - 我将如何在 Solidity 中实施买卖转让税
- java - 在java中调试回文对的代码
- python - Django 不保存评论
- mathics - 如何在数学中使用开始/结束?
- android - 区分蓝牙连接到 Mac 或 Windows/Linux 设备
- pycharm - Ctrl + N 在 Ubuntu、KDE 的 PyCharm 中不能用作新建文件夹的热键 ...
- reactjs - 如何使用 React 获取 API 数据并将其用作 Highchart Data 对象
- java - 如何优化程序以计算加泰罗尼亚语数
- r - 您可以使用循环来重复 cbind 函数吗?
- javascript - 如何使用 Power BI Javascript API 选择数据点?