如何创建上面的自定义clipPath小部件? (我附上了截图)
我试过了,但它不是确切的输出
剪刀类
class MessageClipper extends CustomClipper<Path> {
final double borderRadius = 15;
@override
Path getClip(Size size) {
double width = size.width;
double height = size.height;
double rheight = height - height / 3;
double oneThird = width / 3;
final path = Path()
..lineTo(0, rheight - borderRadius)
..cubicTo(0, rheight - borderRadius, 0, rheight, borderRadius, rheight)
..lineTo(oneThird, rheight)
..lineTo(width/2-borderRadius, height-borderRadius)
..cubicTo(width / 2 - borderRadius, height - borderRadius, width / 2,
height, width / 2 + borderRadius, height - borderRadius )
..lineTo(2 * oneThird, rheight)
..lineTo(width-borderRadius, rheight)
..cubicTo(width - borderRadius, rheight, width, rheight, width,
rheight - borderRadius)
..lineTo(width, 0)
..lineTo(0, 0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
我在这里调用了这个方法
Center(
child: ClipPath(
clipper: MessageClipper(),
child: Container(
height: 41.66,
width: 91.63,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(16.0)),
color: Colors.red,
),
child:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 7,
height: 8,
decoration: BoxDecoration(
color: Color(0xFFCCCCCC),
shape: BoxShape.circle),
),
Container(
width: 7,
height: 8,
decoration: BoxDecoration(
color: Color(0xFFCCCCCC),
shape: BoxShape.circle),
),
Container(
width: 7,
height: 8,
decoration: BoxDecoration(
color: Color(0xFFCCCCCC),
shape: BoxShape.circle),
),
Container(
width: 25,
height: 24,
decoration: BoxDecoration(
color: Color(0xFF1287BA),
shape: BoxShape.circle),
child: Center(
child: Text(
"17",
style: TextStyle(color: Color(0xFFFFFFFF)),
),
),
),
],
),
),)
)
无法像这样在
Center
中的项目Container
,最佳答案
使用这个简单的自定义 ShapeBorder
:
class MessageBorder extends ShapeBorder {
final bool usePadding;
MessageBorder({this.usePadding = true});
@override
EdgeInsetsGeometry get dimensions => EdgeInsets.only(bottom: usePadding? 20 : 0);
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, 20));
return Path()
..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 2)))
..moveTo(rect.bottomCenter.dx - 10, rect.bottomCenter.dy)
..relativeLineTo(10, 20)
..relativeLineTo(20, -20)
..close();
}
@override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}
@override
ShapeBorder scale(double t) => this;
}
和使用代码:
Container(
height: 64,
decoration: ShapeDecoration(
color: Colors.white,
shape: MessageBorder(),
shadows: [
BoxShadow(color: Colors.black, blurRadius: 4.0, offset: Offset(2, 2)),
],
),
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 8),
child: Container(
width: 30,
decoration: BoxDecoration(
color: Colors.blueAccent,
shape: BoxShape.circle,
),
),
),
你可以得到这样的结果:
编辑:如果您希望
Widget
可点击,请使用以下内容:class ButtonMessage extends StatelessWidget {
final String text;
final GestureTapCallback onTap;
const ButtonMessage(this.text, this.onTap);
@override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
elevation: 4,
clipBehavior: Clip.antiAlias,
shape: MessageBorder(),
child: InkWell(
splashColor: Colors.orange,
hoverColor: Colors.blueGrey,
highlightColor: Colors.transparent,
onTap: onTap,
child: Container(
height: 64,
padding: EdgeInsets.only(bottom: 20, right: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: 7,
height: 8,
decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
),
Container(width: 3,),
Container(
width: 7,
height: 8,
decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
),
Container(width: 3,),
Container(
width: 7,
height: 8,
decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
),
Container(width: 6,),
Container(
width: 25,
height: 24,
decoration: BoxDecoration(color: Color(0xFF1287BA), shape: BoxShape.circle),
child: Center(
child: Text(text, style: TextStyle(color: Color(0xFFFFFFFF))),
),
),
],
),
),
),
);
}
}
EDIT2:带有自定义阴影的可点击气球:
class ButtonMessage extends StatelessWidget {
final String text;
final GestureTapCallback onTap;
const ButtonMessage(this.text, this.onTap);
@override
Widget build(BuildContext context) {
return Container(
decoration: ShapeDecoration(
shape: MessageBorder(usePadding: false),
shadows: [
BoxShadow(color: Colors.black, blurRadius: 4, offset: Offset(2, 2)),
],
),
child: Material(
color: Colors.white,
clipBehavior: Clip.antiAlias,
shape: MessageBorder(),
child: InkWell(
splashColor: Colors.orange,
hoverColor: Colors.blueGrey,
highlightColor: Colors.transparent,
onTap: onTap,
child: Container(
height: 64,
padding: EdgeInsets.only(bottom: 20, right: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: 7,
height: 8,
decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
),
Container(width: 3,),
Container(
width: 7,
height: 8,
decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
),
Container(width: 3,),
Container(
width: 7,
height: 8,
decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
),
Container(width: 6,),
Container(
width: 25,
height: 24,
decoration: BoxDecoration(color: Color(0xFF1287BA), shape: BoxShape.circle),
child: Center(
child: Text(text, style: TextStyle(color: Color(0xFFFFFFFF))),
),
),
],
),
),
),
),
);
}
}
关于 flutter - 剪辑路径,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57942533/