英文:
Flutter ClipPath, 1 pixel black line visible from the bottom layer, how to remove it?
问题
我尝试创建一个容器，其中包含从右下角剪切的小节。为此，我使用了一个堆栈（Stack），在其中我添加了一个具有边框半径为20和黑色的容器，然后我放置了另一个容器，位置设置为右侧0和底部0，并且成功制作了形状，但不幸的是，前一层次中可见一个小黑线，我不知道如何去掉它，我尝试了从删除边框到删除边距的一切...
return Scaffold(
backgroundColor: const Color.fromARGB(255, 245, 245, 245),
body: SafeArea(
child: Center(
child: Stack(
children: [
Container(
margin: EdgeInsets.all(0),
height: 150,
width: 350,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
Positioned(
right: 0,
bottom: 0,
child: ClipPath(
clipper: MyCustomCliper(),
child: Container(
color: const Color.fromARGB(255, 245, 245, 245),
height: 60,
width: 100,
),
),
),
],
),
),
),
);
ClipPath的代码：
class MyCustomCliper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path()
..moveTo(0, size.height)
..quadraticBezierTo(20, size.height, 20, 40)
..quadraticBezierTo(20, 20, 40, 20)
..lineTo(size.width - 20, 20)
..quadraticBezierTo(size.width, 20, size.width, 0)
..lineTo(size.width, size.height)
..close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
请帮助，如果有人遇到这个问题。
英文:
I was trying to create a container with a small section clipped from the bottom right corner. To do that I used a stack, where I added a container with border-radius 20, and black color, then I placed another container with position right 0 & bottom 0, and somehow I managed to make the shape but unfortunately a small black line is visible from the previous layer, and I don't know how to remove it, I have tried everything from removing border to removing margin...
return Scaffold(
backgroundColor: const Color.fromARGB(255, 245, 245, 245),
body: SafeArea(
child: Center(
child: Stack(
children: [
Container(
margin: EdgeInsets.all(0),
height: 150,
width: 350,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
Positioned(
right: 0,
bottom: 0,
child: ClipPath(
clipper: MyCustomCliper(),
child: Container(
color: const Color.fromARGB(255, 245, 245, 245),
height: 60,
width: 100,
),
),
),
],
),
),
),
);
Code for ClipPath
class MyCustomCliper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path()
..moveTo(0, size.height)
..quadraticBezierTo(20, size.height, 20, 40)
..quadraticBezierTo(20, 20, 40, 20)
..lineTo(size.width - 20, 20)
..quadraticBezierTo(size.width, 20, size.width, 0)
..lineTo(size.width, size.height)
..close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
Please help, if anyone has encountered this issue.
答案1
得分: 1
我不久前也做了相同的形状。以下是我的代码（不一定是最佳方式，因为这是我第一次为`Clip`编写代码）：
```dart
class MyClip extends CustomClipper<Path> {
@override
Path getClip(Size size) {
double x = size.width, y = size.height;
Path path = Path();
const double ref = 12;
path
..moveTo(0, ref)
..arcToPoint(const Offset(ref, 0), radius: const Radius.circular(12))
..lineTo(x - ref, 0)
..arcToPoint(Offset(x, ref), radius: const Radius.circular(12))
..lineTo(x, (y - y / 7) - ref)
..arcToPoint(Offset(x - ref, y - y / 7), radius: const Radius.circular(12))
..lineTo(x - x / 3.8, (y - y / 7))
..arcToPoint(Offset((x - x / 3.8) - ref, (y - y / 7) + ref), radius: const Radius.circular(12), clockwise: false)
..lineTo((x - x / 3.8) - ref, y - ref)
..arcToPoint(Offset((x - x / 3.8) - 24, y), radius: const Radius.circular(12))
..lineTo(ref, y)
..arcToPoint(Offset(0, y - ref), radius: const Radius.circular(12));
return path;
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) => true;
}
尽管如此，我没有使用Stack。
<details>
<summary>英文:</summary>
I made the same shape not too long ago. Here is my code (not necessary the best way, since it was my 1st time writing a code for a `Clip`):
```dart
class MyClip extends CustomClipper<Path> {
@override
Path getClip(Size size) {
double x = size.width, y = size.height;
Path path = Path();
const double ref = 12;
path
..moveTo(0, ref)
..arcToPoint(const Offset(ref, 0), radius: const Radius.circular(12))
..lineTo(x - ref, 0)
..arcToPoint(Offset(x, ref), radius: const Radius.circular(12))
..lineTo(x, (y - y / 7) - ref)
..arcToPoint(Offset(x - ref, y - y / 7), radius: const Radius.circular(12))
..lineTo(x - x / 3.8, (y - y / 7))
..arcToPoint(Offset((x - x / 3.8) - ref, (y - y / 7) + ref), radius: const Radius.circular(12), clockwise: false)
..lineTo((x - x / 3.8) - ref, y - ref)
..arcToPoint(Offset((x - x / 3.8) - 24, y), radius: const Radius.circular(12))
..lineTo(ref, y)
..arcToPoint(Offset(0, y - ref), radius: const Radius.circular(12));
return path;
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) => true;
}
I didn't use a Stack though.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论