gpt4 book ai didi

flutter - 折叠卡片效果 - Flutter

转载 作者:IT王子 更新时间:2023-10-29 06:35:51 27 4
gpt4 key购买 nike

我想做出如下图的效果,我在Stack中添加了一张Card和一个Container来显示上面的徽章。但我不确定徽章的左上角要使用什么或哪个小部件。

enter image description here

谁能指导我如何实现这种效果。

我现在的状态: enter image description here

最佳答案

为三角形部分使用 CustomPaint 并在 Row 中与您的文本合成

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(
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),
),
),
),
],
),

enter image description here

关于flutter - 折叠卡片效果 - Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53710075/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com