正文
flutter画圆,flutter画圆弧
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
flutter 设置圆角的两种方式
ClipOval例子(默认全圆角):
new ClipOval(
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
ClipRRect例子(可自定义圆角):
new ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
)
相关问答
Q1: Flutter自定义绘制组件
Flutter中自定义组件一般有两种方式：
CustomPaint继承自SingleChildRenderObjectWidget，即它可以在通过嵌套引入到widget树中，并且可以有一个child子widget。它的构造方法如下：
painter和foregroundPainter需要接收CustomPainter对象，是CustomPaint核心。CustomPainter是进行UI绘制的核心类，绘制时, CustomPaint 首先在画布上调用 painter绘制 , 然后再绘制它的 child Widget, child 绘制完成后再调用 foregroundPainter 进行绘制。
size属性标识绘制区域大小，但当CustomPaint有child，该属性将会忽略，而使用child的大小为绘制区域大小。
isComplex和willChange用于控制绘制层缓存处理的，这里暂不讨论。
可实现CustomPainter子类进行UI绘制
实现paint方法进行真正的绘制，canvas是画布对象，size是绘制区域，是从CustomPaint中size属性传递得到的。绘制过程与Android原生开发十分类似，连API都十分相像，这点对熟悉Android原生开发者真是太友好了。
Paint对象是画笔对象，就是绘图工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格等，通过这些属性我们可以很方便的来定制自己的UI效果，在绘制的过程中可以定义多个画笔，以便实现多种风格图形的集合。
根据需求选择合适的画笔属性，完成你的绘制。
Canvas是绘制的画布，它包含了很多绘制方法，可以绘制出各种形状的图形。需要注意的是，画布是应用所有控件都在使用的, 所以通过这个画布其实是可以绘制充满屏幕的内容的，每次绘制都应该限制在本控件的区域(Size)内, 以免绘制覆盖到其他组件。
下面介绍下Canvas的绘制方法：
PointMode是个枚举
p1、p2为线段两个端点
Rect定义矩形的大小位置，有多种构造方式:
RRect描述圆角矩形，他通过Rect和Radius来构造
画圆比较简单，c表示圆心位置，radius是半径。
椭圆使用外接矩形确定大小位置，rect就是外接矩形。
绘制弧形，先确定弧形对应的椭圆，同样地用外接矩形rect确定椭圆，然后根据起始点和结束点角度来确定那一段弧度，startAngle，sweepAngle分别代表起始和结束点角度，角度用弧度表示法。
useCenter表示是否连接闭合形状，userCenter = false表示不闭合，即画一段弧线，userCenter = true表示闭合，即绘制一个扇形。
绘制路径，关键在于构建路径Path，可以直接new Path对象，然后通过path方法可以连接出图形，path关键方法如下：
还有其他方法，有兴趣可以查看API。
Q2: Flutter圆角设置组件
flutter能设置圆角的组件：ClipRRect、ClipOval、CircleAvatar、BoxDecoration BorderRadius.circular、BoxDecoration BoxShape.circle
1.ClipRRect：将 child 剪裁为宽高相等的圆角组件，可设置圆角度数
2.ClipOval： 将child裁剪为宽高相等的圆角组件（只包括圆形和椭圆形），不可设置圆角度数
3.CircleAvatar：只能设置自身圆形，不能裁剪child
4.BoxDecoration BorderRadius.circular 设置自身圆角,不能裁剪child
4.BoxDecoration BoxShape.circle 只能设置自身为圆形，不能裁剪child
参考： flutter 圆角设置
Q3: Flutter 设置圆角的几种方案
这种方式设置的圆角如果显示在四角的子控件设置了渐变，将会影响圆角显示
上图可以看到我们设置了margin的left为4后，左边的圆角明显显示有问题，被截了一部分
这种方式添加的圆角不会被子控件覆盖
