#flutter
Вопрос:
Я пытаюсь изогнуть контейнер, используя этот код:
class CurveClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
int curveHeight = 40;
Offset controlPoint = Offset(size.width / 2, size.height curveHeight);
Offset endPoint = Offset(size.width, size.height - curveHeight);
Path path = Path()
..lineTo(0, size.height - curveHeight)
..quadraticBezierTo(controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy)
..lineTo(size.width, 0)
..close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Использование:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// The title text which will be shown on the action bar
title: Text(title),
),
body: Container(
child: ClipPath(
clipper: CurveClipper(),
child: Container(
color: Colors.red,
height: 200.0,
),
),
),
);
}
Тем не менее, это приводит меня к следующему:
Скриншот
Но я хочу, чтобы кривая была вверху контейнера, а не внизу. Как я могу этого достичь?
Комментарии:
1. » Но я хочу, чтобы кривая была вверху, а не внизу. Как я могу этого достичь?» — красная кривая с вашего изображения вверху
2. кривая @pskink внизу, там есть изображение.
3. @pskink, на изображении, которое я опубликовал, есть изогнутый контейнер, но в нижней части контейнера, а не в верхней части контейнера , как я хочу
4. верхняя часть контейнера , а не верхняя часть страницы
5. Ваша логика пути неверна.
Ответ №1:
Эта работа для меня
Файл с вырезкой
Container(
margin: EdgeInsets.only(left: 15, right: 15),
alignment: Alignment.center,
child: ClipPath(
clipper: ClipPathClass(),
child: SizedBox(
width: 320,
height: 240,
child: Container(
color: Colors.red,
),
),
),
),
Файл ClipPathClass
class ClipPathClass extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.moveTo(0.0, size.height - (size.height * 6 / 8));
var secondControlPoint = Offset(size.width / 2, 0);
var secondPoint = Offset(size.width, size.height - (size.height * 6 / 8));
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondPoint.dx, secondPoint.dy);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
