flutter 如何画圆角三角形

ffscu2ro  于 2023-08-07  发布在  Flutter
关注(0)|答案(3)|浏览(221)

我需要创建一个像这样的圆角三角形。我该如何实现这一点?
我试着搜索相关的答案,但只找到了没有圆角的实现。
有没有什么方法可以在不使用静态图像的情况下实现类似的三角形?


的数据

1yjd4xko

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

yuvru6vn

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;
  }
}

字符串

tjvv9vkg

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;
  }
}

字符串

相关问题