我需要创建一个像这样的圆角三角形。我该如何实现这一点?我试着搜索相关的答案,但只找到了没有圆角的实现。有没有什么方法可以在不使用静态图像的情况下实现类似的三角形?
的数据
1yjd4xko1#
这可以使用custompainter来完成。代码如下:
class RoundedTrianglePainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final double width = size.width; final double height = size.height; final paint = Paint() ..color = Colors.blueGrey ..style = PaintingStyle.fill; final path = Path() ..moveTo((width / 2)-16, 80) ..arcToPoint( Offset((width / 2) +16, 80), radius: Radius.circular(22), clockwise: true, ) ..lineTo(width, height) ..lineTo(0, height) ..close(); canvas.drawPath(path, paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } }
字符串
用法
Container( width: 200, height: 200, child: CustomPaint(painter: RoundedTrianglePainter(),), )
型
输出Triangle with rounded corner
yuvru6vn2#
您可以在画布上绘制并使用不同的strokeJoin值。参见https://api.flutter.dev/flutter/dart-ui/Paint/strokeJoin.html下面是一个示例:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Triangle', home: Scaffold( body: Center( child: SizedBox( height: 200, width: 200, child: CustomPaint( painter: TrianglePainter(), ), ), ), ), ); } } class TrianglePainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { var paint = Paint() ..color = Colors.red ..strokeWidth = 10 ..style = PaintingStyle.stroke ..strokeJoin = StrokeJoin.round; var path = Path(); path.moveTo(10, 10); path.lineTo(50, 50); path.lineTo(10, 50); path.lineTo(10, 10); path.lineTo(50, 50); canvas.drawPath(path, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } }
tjvv9vkg3#
代码更适应,像图像一样给出正确的旋转,
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Triangle', home: Scaffold( backgroundColor: Colors.grey, body: Center( child: CustomPaint( painter: TrianglePainter(Colors.blue), size: Size(200, 200), ), ), ), ); } } class TrianglePainter extends CustomPainter { final Color color; TrianglePainter(this.color); @override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = Colors.white ..style = PaintingStyle.fill; final path = Path() ..moveTo((size.width / 2) - 16, 120) ..arcToPoint( Offset((size.width / 2) + 16, 120), radius: const Radius.circular(21), ) ..lineTo(size.width, size.height) ..lineTo(0, size.height) ..close(); canvas.drawPath(path, paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } }
3条答案
按热度按时间1yjd4xko1#
这可以使用custompainter来完成。代码如下:
字符串
用法
型
输出Triangle with rounded corner
yuvru6vn2#
您可以在画布上绘制并使用不同的strokeJoin值。参见https://api.flutter.dev/flutter/dart-ui/Paint/strokeJoin.html
下面是一个示例:
字符串
tjvv9vkg3#
代码更适应,像图像一样给出正确的旋转,
字符串