如何在 Flutter 中绘制具有边框半径的自定义矩形？

Question

我的 UI 绘制如下图：

所以我在 Flutter 中使用 CodePainter 编写了一些代码。 这是我的代码：

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

class BackgroundShape extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint();
    paint.color = Colors.black;
    var smallRect = Alignment.bottomCenter.inscribe(Size(100, 50), Rect.fromLTWH(size.width/2 -35, size.height-40, 40, 30));
    var path = Path();
    path.fillType = PathFillType.evenOdd;
    path.addRRect(RRect.fromRectAndCorners(Rect.fromLTWH(0, 0, size.width, size.height), bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)));
    path.addRRect(RRect.fromRectAndCorners(smallRect, topLeft: Radius.circular(10), topRight: Radius.circular(10)));
    path.lineTo(0, size.height);
    path.lineTo(size.width/2 - 35, size.height);
    path.lineTo(size.width/2 - 35, size.height-40);
    path.lineTo(size.width/2 + 35, size.height-40);
    path.lineTo(size.width/2 + 35, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();

    canvas.drawPath(path, paint);
  }

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

这是我的结果：

如何添加边框半径？ 请帮助我：D 谢谢！

Answer 1

出于某种原因，我无法完全运行您提供的代码，但考虑到您当前的要求和评论。 我创建了以下示例供您参考：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          child: CustomPaint(
            painter: PainterTwo(),
          ),
        ),
      ),
    );
  }
}

class PainterOne extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double w = size.width;
    double h = size.height;
    double r = 15;

    var paint1 = Paint()
      ..color = Color(0xff888888)
      ..style = PaintingStyle.fill;

    RRect fullRect = RRect.fromRectAndRadius(
      Rect.fromCenter(center: Offset(w / 2, h / 2), width: w, height: h),
      Radius.circular(r),
    );
    canvas.drawRRect(fullRect, paint1);
  }

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

class PainterTwo extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0;

    Path path = Path();
    path.addRRect(RRect.fromRectAndRadius(
        Rect.fromLTWH(
            size.width / 2, size.height / 2, size.width / 4, size.height / 4),
        Radius.circular(15)));
    canvas.drawPath(path, paint);
  }

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

PainterOne() 的 Output：

PainterTwo() 的 Output：