如何画这样的半圆?
代码:
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;
}
创建一个
StatelessWidget
说 MyArc
接受 diameter
。
import 'dart:math' as math;
class MyArc extends StatelessWidget {
final double diameter;
const MyArc({super.key, this.diameter = 200});
@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;
}
用途:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: MyArc(diameter: 300),
);
}
Container(
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
),
使用此代码,您可以制作半圆。
创建一个从 CustomClipper 扩展的类,并使用 arcToPoint 方法来绘制圆并使用 ClipPath 小部件,这是实现该功能的代码
ClipPath(
clipper: CustomClip(),
child: Container(
width: 200,
height: 100,
color: Colors.blue,
),
),
class CustomClip extends CustomClipper<Path> {
@override
Path getClip(Size size) {
double radius = 100;
Path path = Path();
path
..moveTo(size.width / 2, 0)
..arcToPoint(Offset(size.width, size.height),
radius: Radius.circular(radius))
..lineTo(0, size.height)
..arcToPoint(
Offset(size.width / 2, 0),
radius: Radius.circular(radius),
)
..close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
有一个简单的实现(不是最好的)
您可以在一行内绘制两个具有相同宽度和高度的容器 并为每个容器提供一个 BoxDectoration => BorderRadius 如下面的代码, 这不是最好的实现,它只是有效
Row(children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(200),),
color: Colors.blue[300],
),
width: 200,
height: 200,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(200),),
color: Colors.blue[300],
),
width: 200,
height: 200,
)
], ),
更新:你只需要一个
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,
),
这是使用
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,
),
),
],
),
这可行,您可以更改尺寸,但请确保高度是 borderRadius 的一半,宽度等于 borderRadius。
Container(
height: 50,
width:100,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
))),
Container(
width: 100,
height: 50,
decoration: const BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.green,
width: 20,
),
right: BorderSide(
color: Colors.green,
width: 20,
),
bottom: BorderSide(
color: Colors.green,
width: 20,
),
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(200),
bottomRight: Radius.circular(200),
),
),
),