我尝试了下面的代码,什么是最好的方式做的曲线.我的代码分为两部分:首先使用堆栈包裹整个屏幕,然后使用CustomBigArcClipper的功能
return Scaffold(
backgroundColor: Colors.blue,
body: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 0,
bottom: MediaQuery.of(context).size.height * 0.5,
left: 0,
right: 0,
child: ClipPath(
clipper: CustomBigArcClipper(),
child: Container(
height: 600,
color: Colors.green,
),
),
),
],
),
);
class CustomBigArcClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
double w = size.width;
double h = size.height;
path.lineTo(0, h);
path.quadraticBezierTo(w * 0.5, h - 100, w, h);
path.lineTo(w, 0);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
1条答案
按热度按时间kgqe7b3p1#
你可以把形状分成两部分,上面一部分是矩形,下面一部分是半圆形。