在扑朔迷离中,我想剪辑Container
的可选部分以制作此小部件:
将小部件剪裁为在其顶部和底部有两个半圆。
对于此裁剪后的小部件的某些功能,我想具有一些可选功能,例如:
剪切该可选内容的顶部,底部和右边的空格。我该如何使用可选功能剪切Container
?
答案 0 :(得分:2)
您可以使用自定义Clipper + arcToPoint路径方法来创建干净的弧。
喜欢:
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as v_math;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipPath(
clipper: DolDurmaClipper(right: 40, holeRadius: 20),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(15),
),
color: Colors.blueAccent,
),
width: 300,
height: 95,
padding: EdgeInsets.all(15),
child: Text('first example'),
),
),
SizedBox(
height: 20,
),
ClipPath(
clipper: DolDurmaClipper(right: 100, holeRadius: 40),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(15),
),
color: Colors.amber,
),
width: 200,
height: 250,
padding: EdgeInsets.all(35),
child: Text('second example'),
),
),
]);
}
}
class DolDurmaClipper extends CustomClipper<Path> {
DolDurmaClipper({@required this.right, @required this.holeRadius});
final double right;
final double holeRadius;
@override
Path getClip(Size size) {
final path = Path()
..moveTo(0, 0)
..lineTo(size.width - right - holeRadius, 0.0)
..arcToPoint(
Offset(size.width - right, 0),
clockwise: false,
radius: Radius.circular(1),
)
..lineTo(size.width, 0.0)
..lineTo(size.width, size.height)
..lineTo(size.width - right, size.height)
..arcToPoint(
Offset(size.width - right - holeRadius, size.height),
clockwise: false,
radius: Radius.circular(1),
);
path.lineTo(0.0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(DolDurmaClipper oldClipper) => true;
}
答案 1 :(得分:0)
要为容器的左侧和右侧创建相同的形状,您可以使用它。
class DolDurmaClipper extends CustomClipper<Path> {
final double holeRadius;
final double bottom;
DolDurmaClipper({required this.holeRadius, required this.bottom});
@override
Path getClip(Size size) {
final path = Path()
..moveTo(0, 0)
..lineTo(0.0, size.height - bottom - holeRadius)
..arcToPoint(
Offset(0, size.height - bottom),
clockwise: true,
radius: Radius.circular(1),
)
..lineTo(0.0, size.height)
..lineTo(size.width, size.height)
..lineTo(size.width, size.height - bottom)
..arcToPoint(
Offset(size.width, size.height - bottom - holeRadius),
clockwise: true,
radius: Radius.circular(1),
);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(DolDurmaClipper oldClipper) => true;
}