我在Flutter中创建了一个自定义形状。我面临的问题是,我使用了 ShapeBorder并为其分配了Card。我想在绘制的小部件内对齐我的文本,但目前它也在考虑将我们的视图作为小部件的一部分。
这是我使用的代码:
Align(
child: Container(
height: 250,
width: 300,
child: Card(
clipBehavior: Clip.hardEdge,
shape: Shape1(factor: 0.8),
child: Container(
padding: EdgeInsets.only(left: 16.0),
child: Align(
alignment: Alignment.bottomLeft,
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book',
// style: textStyleNotoSansRegular(),
),
),
),
),
),
widthFactor: 0.8,
),
形状类:
class Shape1 extends ShapeBorder {
final double factor;
Shape1({this.factor});
@override
EdgeInsetsGeometry get dimensions => EdgeInsets.zero;
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
return Path()
..moveTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
..relativeLineTo(rect.width * factor, 0)
..lineTo(rect.topRight.dx, rect.topRight.dy)
..relativeLineTo(rect.width * -factor, 0)
..close();
}
@override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
var path = Path()
..moveTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
..relativeLineTo(rect.width * factor, 0)
..lineTo(rect.topRight.dx, rect.topRight.dy)
..relativeLineTo(rect.width * -factor, 0)
..close();
var boxPainter = Paint();
boxPainter.strokeWidth = 5;
boxPainter.color = Colors.yellow;
boxPainter.style = PaintingStyle.stroke;
canvas.drawPath(path, boxPainter);
}
@override
ShapeBorder scale(double t) => null;
}
当前结果:
预期结果: