Flutter 如何画三角形的圆角

发布于11月05日

我正在try 从这张图像复制光标，但在创建圆角时遇到了一些问题.我似乎不能把它做对.

我正在与您分享我的代码(如果您愿意，可以在DartPad中运行它).我被困在了需要转弯的地方.我试了几种方法，但似乎不管用.根据我的粗略理解，它应该使用drawRRect来完成.

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Cursor'),
        ),
        body: Center(
          child: Transform.rotate(
            angle: pi,
            child: CustomPaint(
                size: const Size(60, 70),
                painter: CursorPainter()
            )
          )
        ),
      ),
    )
  );
}

class CursorPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;
    
    canvas.drawPath(drawPath(size.width, size.height), paint);
  }
  
  Path drawPath(double x, double y) => Path()
      ..moveTo(x / 2, 0)
      ..lineTo(0, y)
      ..quadraticBezierTo(x / 2, y + 15, x, y)
      ..close();

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

下面是它目前的样子

如果有人有一个 idea

import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Cursor'), ), body: Center( child: CustomPaint(size: const Size(50, 70), painter: CursorPainter()), )), )); } class CursorPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = Colors.red ..style = PaintingStyle.fill; canvas.drawPath(drawPath(size.width, size.height), paint); } Path drawPath(double x, double y) => Path() ..moveTo(x * 0.05, y * 0.1) ..quadraticBezierTo(x / 2, -x * 0.10, x * 0.95, y * 0.1) //borther right ..quadraticBezierTo(x, y * 0.12, x * 0.95, y * 0.2) ..lineTo(x * 0.5 + (x * 0.1), y * 0.9) //borther bottom ..quadraticBezierTo(x * 0.5, y * 1.08, x * 0.40, y * 0.9) ..lineTo(x * 0.05, y * 0.2) //borther left ..quadraticBezierTo(0, y * 0.12, x * 0.05, y * 0.1) ..close(); @override bool shouldRepaint(covariant CustomPainter oldDelegate) => false; }

Flutter 如何画三角形的圆角

推荐答案

Flutter相关问答推荐

Flutter FireRestore：如何从特定/实际领域获取数据

在Flutter中为不受约束的小部件制作动画

无法在Flatter中设计正确的布局

如何使用Firebase Firestore来获取外部集合中的文档子集合中的文档

Flutter 蜂窝-检索非基元数据类型列表

IsScrollable为True时如何删除Flutter 选项卡栏左侧填充

使用Future函数的容器中未显示图像，但在使用图像小工具时显示

查询满足AND条件的文档的FiRestore

在Dart中使用Riverpod代码生成时出现问题(addListener)

Flutter类调用另一个类中的另一个方法失败

如何在巡逻测试期间重新启动dart 侧应用程序状态？

参数类型void Function()无法分配给参数类型void Function(LongPressEndDetails)？

Flutter：如何设置 PersistentFooterButtons 背景？

在 Flutter 中解码 BLE 设备负载

如何在 Flutter (iOS) 中解决这个问题

Flutter/Dart - 从外部类更新状态

状况不佳 - Cubit

type '({bool growable}) => List' 不是类型转换中类型 'List' 的子类型

如何在 flutter 中制作这种类型的扩展瓦片

Flutter 评级栏包选中和未选中的容器