flutter - Flutter:需要帮助来实现带有图像的卡片
解决方案
这是使用 aCustomPainter
和 Path 生成绘图的可能解决方案。我使用了 Path 类的cubicTo
和 aaddRect
函数。有关这些函数和路径绘制的更多信息,我参考了这篇:Flutter 中的路径:可视化指南
这是扩展的类CustomPainter
class CardPainter extends CustomPainter {
final Color color;
final double strokeWidth;
CardPainter({this.color = Colors.black, this.strokeWidth = 3});
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = color
..strokeWidth = this.strokeWidth
..style = PaintingStyle.stroke;
canvas.drawPath(getShapePath(size.width, size.height), paint);
}
// This is the path of the shape we want to draw
Path getShapePath(double x, double y) {
return Path()
..moveTo(2 * x / 3, y)
..cubicTo(x / 1.5, y, 0, y / 3, x, 0) // draw cubic curve
..addRect(Rect.fromLTRB(0, 0, x, y)); // draw rectangle
}
@override
bool shouldRepaint(CardPainter oldDelegate) {
return oldDelegate.color != color;
}
}
这里是执行CustomPainter
class CustomCard extends StatelessWidget {
CustomCard({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Custom Card Demo')),
body: Center(
child: Container(
color: Colors.grey[300],
width: 250,
height: 120,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: CustomPaint(
painter: CardPainter(color: Colors.blueAccent, strokeWidth: 3), // this is your custom painter
child: Stack(
children: <Widget>[
Positioned(
top: 25,
left: 30,
child: Text('Text1'),
),
Positioned(
top: 55,
left: 150,
child: Text('Text2'),
),
],
),
),
),
),
);
}
}
推荐阅读
- boto3 - 使用 boto3“资源”获取 s3 存储桶?
- c# - 在 asp.net mvc 和 web api 中为上下文用户身份返回了无效的组 SID
- node.js - 错误 NU5019:找不到文件:“许可证”-电子安装程序窗口
- c - C:如何将argv实现成变量并实现for循环?
- php - 如何在模型中的laravel中建立关系?
- javascript - 使用 flexbox 进行无限(水平)滚动
- python - 尝试将图像从 RGB 转换为 YCrCb 时出现 OpenCV2 错误
- r - FUN(X[[i]], ...) 中的错误:找不到对象“血小板”
- html - 如何将三列表格制作成移动两列表格
- sql - 检查是否有重复订单