3

我在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;
}

当前结果:

当前结果

预期结果:

预期结果

4

0 回答 0