Flutter自定义绘制Widget初探

RRect.fromRectAndCorners(
Rect rect,
{
Radius topLeft: Radius.zero,
Radius topRight: Radius.zero,
Radius bottomRight: Radius.zero,
Radius bottomLeft: Radius.zero
}
)

// 顶点X轴Y轴的圆角设置相同
const Radius.circular(double radius)
// 顶点X轴Y轴的圆角设置可以不相同
const Radius.elliptical(this.x, this.y)

绘制圆角矩形的方法

void drawRRect(RRect rrect, Paint paint)

image-5.png

// 利用矩形的左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标
// 以及一个Radius来确定圆角矩形
RRect.fromLTRBR(double left, double top, double right, double bottom, Radius radius)

// 需要先定义一个Rect，使用方式和fromLTRBR类似
RRect.fromRectAndRadius(Rect rect, Radius radius)

image-6.png

// 利用矩形的左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标
// 以及设置四个顶点的X轴相同圆角，设置四个顶点的Y轴相同圆角来确定圆角矩形
RRect.fromLTRBXY(double left, double top, double right, double bottom, double radiusX, double radiusY)

// 需要先定义一个Rect，使用方式和fromLTRBXY类似
RRect.fromRectXY(Rect rect, double radiusX, double radiusY)

image-7.png

圆角矩形绘制有一个需要注意的地方，如果设置矩形的半径和圆角的半径相等，则绘制出来的是一个圆

// 设置矩形的半径和圆角的半径不相等，效果如下面左图
Rect rect = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 50.0);
RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(10.0));
// 设置矩形的半径和圆角的半径相等，效果如下面右图
Rect rect = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 50.0);
RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(50.0));

image-8.png

2.5 绘制双圆角矩形

Flutter中提供了绘制双圆角矩形的方法

void drawDRRect(RRect outer, RRect inner, Paint paint)

这里需要注意的是，内圆角矩形的半径不能大于外圆角矩形的半径，否则无法绘制。

// 第一种：外圆角矩形的半径大于内圆角矩形半径,如下面左图
Rect rectOut = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 80.0);
Rect rectInner = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 40.0);
// 第二种：外圆角矩形的半径等于内圆角矩形半径,如下面中图
Rect rectOut = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 80.0);
Rect rectInner = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 80.0);
// 第三种：外圆角矩形的半径小于内圆角矩形半径,无法绘制,如下面右图
Rect rectOut = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 80.0);
Rect rectInner = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 81.0);

接下来绘制上面三种情况下的双圆角矩形

RRect rRectOut = RRect.fromRectAndRadius(rectOut, Radius.circular(10.0));
RRect rRectInner = RRect.fromRectAndRadius(rectInner, Radius.circular(30.0));