英文:
Create a custom shape in container flutter
问题
以下是您要翻译的内容：
"Desired container style" 可以翻译为 "期望的容器样式"。
"class AngledContainerClipper extends CustomClipper<Path> {" 可以翻译为 "AngledContainerClipper 类继承自 CustomClipper<Path> {"。
"@override" 可以保留不翻译。
"Path getClip(Size size) {" 可以翻译为 "获取剪辑路径(Size size) {"。
"final borderRadius = 5 * size.shortestSide;" 可以翻译为 "final borderRadius = 5 * size.shortestSide;"。
"final path = Path();" 可以翻译为 "final path = Path();"。
"path.lineTo(size.width - 60, 0);" 可以翻译为 "path.lineTo(size.width - 60, 0);"。
"path.lineTo(size.width - 16, size.height);" 可以翻译为 "path.lineTo(size.width - 16, size.height);"。
"path.lineTo(16, size.height);" 可以翻译为 "path.lineTo(16, size.height);"。
"path.lineTo(0, size.height);" 可以翻译为 "path.lineTo(0, size.height);"。
"path.close();" 可以翻译为 "path.close();"。
"return path;" 可以翻译为 "return path;"。
"bool shouldReclip(CustomClipper<Path> oldClipper) {" 可以翻译为 "bool shouldReclip(CustomClipper<Path> oldClipper) {"。
"return false;" 可以翻译为 "return false;"。
"And use it like this" 可以翻译为 "然后像这样使用它"。
"ClipPath(" 可以翻译为 "ClipPath("。
"clipper: AngledContainerClipper()," 可以翻译为 "剪辑器: AngledContainerClipper(),"。
"child: Container(" 可以翻译为 "子元素: Container("。
"height: 72," 可以翻译为 "高度: 72,"。
"child: Tab(text: 'Tab1')," 可以翻译为 "子元素: Tab(text: 'Tab1'),"。
"I've tried different things but couldn't crack this yet. will be helpful if anyone can provide me with a solution." 可以翻译为 "我尝试了不同的方法，但仍然无法解决这个问题。如果有人能提供解决方案将会很有帮助。"。
英文:
I wanna try and create the following design for the tab bar option as a container.
Desired container style
The closest i got is with this code snippet
class AngledContainerClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final borderRadius = 5 * size.shortestSide;
final path = Path();
path.lineTo(size.width - 60, 0);
path.lineTo(size.width - 16, size.height);
path.lineTo(16, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
And use it like this
ClipPath(
clipper: AngledContainerClipper(),
child: Container(
height: 72,
child: Tab(text: 'Tab1'),
),
),
I've tried different things but couldnt crack this yet. will be helpful if anyone can provide me with a solution.
答案1
得分: 1
class GSCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// Layer 1
Paint paint = Paint()
..color = const Color.fromARGB(255, 255, 255, 255)
..style = PaintingStyle.fill
..strokeWidth = size.width * 0.00
..strokeCap = StrokeCap.butt
..strokeJoin = StrokeJoin.miter;
Path path = Path();
double radius = size.height * 0.25;
path.moveTo(0, radius);
path.lineTo(0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width * 0.75, 0);
path.lineTo(radius, 0);
path.quadraticBezierTo(0, 0, 0, radius);
path.close();
canvas.drawPath(path, paint);
Paint stroke = Paint()
..color = const Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.stroke
..strokeWidth = size.width * 0.00
..strokeCap = StrokeCap.butt
..strokeJoin = StrokeJoin.miter;
canvas.drawPath(path, stroke);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Use it like this
CustomPaint(
size: Size(500, (500 * 0.5).toDouble()),
// 500 is WIDTH, You can Replace with your desired width for Custom Paint and height will be calculated automatically
painter: GSCustomPainter(),
child: const SizedBox(height: 300, width: 500, child: Center(child: Text('Child Widget'))),
)
英文:
Try This
class GSCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// Layer 1
Paint paint = Paint()
..color = const Color.fromARGB(255, 255, 255, 255)
..style = PaintingStyle.fill
..strokeWidth = size.width * 0.00
..strokeCap = StrokeCap.butt
..strokeJoin = StrokeJoin.miter;
Path path = Path();
double radius = size.height * 0.25;
path.moveTo(0, radius);
path.lineTo(0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width * 0.75, 0);
path.lineTo(radius, 0);
path.quadraticBezierTo(0, 0, 0, radius);
path.close();
canvas.drawPath(path, paint);
Paint stroke = Paint()
..color = const Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.stroke
..strokeWidth = size.width * 0.00
..strokeCap = StrokeCap.butt
..strokeJoin = StrokeJoin.miter;
canvas.drawPath(path, stroke);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Use it like this
CustomPaint(
size: Size(500, (500 * 0.5).toDouble()),
// 500 is WIDTH, You can Replace with your desired width for Custom Paint and height will be calculated automatically
painter: GSCustomPainter(),
child: const SizedBox(height: 300, width: 500, child: Center(child: Text('Child Widget'))),
),
My output
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论