英文:
How can I Do this UI using ClipPath? and how it can be Done in another way?
问题
以下是您提供的内容的中文翻译：
我尝试了以下的代码，
如何以最佳方式创建那个曲线。
我的代码分为两部分：
首先是整个屏幕包裹在堆栈中，
其次是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;
}
}
英文:
I tried the following code,
What is the best way to do that curve.
My code is separated into 2 parts:
first the entire screen wrapped with stack
second the function of 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
得分: 1
你可以将形状分为两个部分，上面是一个矩形，下面是一个半圆。
class CustomBigArcClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
double w = size.width;
double h = size.height;
path.addRect(Rect.fromLTWH(0, 0, w, h * 0.5));
path.addOval(Rect.fromCircle(
center: Offset(w * 0.5, h * 0.5),
radius: w / 2,
));
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
英文:
You can split the shape into two sections, top one is a rectangle, bottom is a half circle.
class CustomBigArcClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
double w = size.width;
double h = size.height;
path.addRect(Rect.fromLTWH(0, 0, w, h * 0.5));
path.addOval(Rect.fromCircle(
center: Offset(w * 0.5, h * 0.5),
radius: w / 2,
));
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论