flutter - 折卡效果——Flutter
问题描述
我想做一个如下图的效果,我在 Stack 中添加了一个 Card 和一个 Container 来显示上面的徽章。但我不确定徽章的左上角使用什么或哪个小部件。
谁能指导我如何达到这种效果。
解决方案
将 aCustomPaint
用于三角形部分并与您的文本合成 aRow
class TrianglePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.grey
..strokeWidth = 2.0;
Path path = Path();
path.moveTo(0.0, size.height);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
在你的Row
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 8.0,
width: 5.0,
child: CustomPaint(
painter: TrianglePainter(),
),
),
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topRight: Radius.circular(6.0),
bottomLeft: Radius.circular(6.0))),
width: 120.0,
height: 30.0,
child: Center(
child: Text(
'Customer Replay',
style: TextStyle(color: Colors.white),
),
),
),
],
),
推荐阅读
- byte - 当我们想用私有协议(不是http)在不同服务器之间传输文件时,使用字节或字符串来定义字段更好吗?
- c# - wcf服务c#.net框架4.5.1
- angular - 在角度/电子应用程序上将图像转换为 base64 URI
- r - 如何合并数据框中的行
- json - 如何使用 JMeter 从 JSON 响应中存在的 URL 中提取子字符串
- android-studio - 未处理的异常:MissingPluginException(在通道 sms_autofill 上找不到方法 listenForCode 的实现)
- php - 如何在 PHP 中删除 JSON 元素?
- python - LSTM 始终预测恒定值
- javascript - 使用 Gsuit 随机化谷歌表单部分?
- python - numpy.ndarray 中的行组合