如何绘制这样的半圆?
代码:
class DrawHalfCircleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final Path path = new Path();
...
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
答案 0 :(得分:2)
创建一个接受StatelessWidget
的{{1}}说MyArc
。
diameter
用法:
class MyArc extends StatelessWidget {
final double diameter;
const MyArc({Key key, this.diameter = 200}) : super(key: key);
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: MyPainter(),
size: Size(diameter, diameter),
);
}
}
// This is the Painter class
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = Colors.blue;
canvas.drawArc(
Rect.fromCenter(
center: Offset(size.height / 2, size.width / 2),
height: size.height,
width: size.width,
),
math.pi,
math.pi,
false,
paint,
);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
答案 1 :(得分:0)
这是一个使用 Stack
的简单代码。您可以使用矩形和圆形轻松生成半圆。使用 BoxDecoration(shape:)
Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.rectangle,
),
height: 35,
width: 35,
),
),
],
),
更新:您只需要一个Container
,简单易懂:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
topLeft: Radius.circular(100)),
color: Colors.red,
shape: BoxShape.rectangle,
),
height: 35,
width: 35,
),