如何让文本适配自定义clipPath的指定区域？

我制作了如下自定义裁剪的UI卡片：

目前存在文本无法完整显示的问题，希望将文本放置在UI的上部区域，使其不被clipPath的裁剪区域遮挡，忽略图中标记为红色容器的UI底部部分：

以下是我的完整代码：

class QuoteWidget extends StatelessWidget {
  const QuoteWidget({super.key, required this.child});
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 20),
      alignment: Alignment.center,
      child: AppCustomClipPath(
        shadow: Shadow(
          color: Colors.grey.withOpacity(0.5), //阴影颜色
          blurRadius: 15, //模糊半径
          offset: const Offset(0, 2),
        ),
        clipper: CustomQuotePainter(),
        child: Container(
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 0.6,
            maxWidth: MediaQuery.of(context).size.width,
          ),
          color: Colors.white,
          padding: const EdgeInsets.only(
            bottom: 60,
            top: 15,
            left: 15,
            right: 15,
          ),
          child: Text(
            "Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum  Lorem Impsum Lorem    Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem       Impsum",
            style: Theme.of(context)
                .textTheme
                .displaySmall!
                .copyWith(color: Colors.black),
          ),
        ),
      ),
    );
  }
}

class CustomQuotePainter extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path0 = Path();
    path0.moveTo(size.width * 0.0001600, size.height * 0.0004800);
    path0.lineTo(size.width * 1.0015800, size.height * -0.0002800);
    path0.lineTo(size.width * 1.0015800, size.height * 0.6996800);
    path0.lineTo(size.width * 0.4008200, size.height * 0.7007400);
    path0.lineTo(size.width * 0.2009700, size.height * 0.9068600);
    path0.lineTo(size.width * 0.2006800, size.height * 0.6992200);
    path0.lineTo(size.width * -0.0002100, size.height * 0.7003800);
    path0.lineTo(size.width * 0.0001600, size.height * 0.0004800);
    path0.close();

    return path0;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

@immutable
class AppCustomClipPath extends StatelessWidget {
  final Shadow? shadow;
  final CustomClipper<Path>? clipper;
  final Widget? child;

  const AppCustomClipPath({
    super.key,
    @required this.shadow,
    @required this.clipper,
    @required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      key: UniqueKey(),
      painter: _ClipShadowPainter(
        clipper: clipper!,
        shadow: shadow!,
      ),
      child: ClipPath(child: child, clipper: this.clipper),
    );
  }
}

class _ClipShadowPainter extends CustomPainter {
  final Shadow? shadow;
  final CustomClipper<Path>? clipper;

  _ClipShadowPainter({@required this.shadow, @required this.clipper});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = shadow!.toPaint();
    var clipPath = clipper!.getClip(size).shift(shadow!.offset);
    canvas.drawPath(clipPath, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

核心思路 #

你的CustomQuotePainter裁剪路径只保留了容器70%高度以内的可见区域（对应代码里的size.height * 0.6996800），底部红色标记区域会被完全裁剪，所以只需要让文本在可见的上部区域内展示即可。

具体修改步骤 #

1. 移除底部无效padding：原代码中设置的bottom:60 padding对应被裁剪的区域，留空只会压缩文本的显示空间，直接移除即可。
2. 文本区域靠上对齐：通过Align组件将文本容器对齐到顶部，确保文本从可见区域的最上方开始展示。
3. 处理长文本溢出：加入SingleChildScrollView，避免文本过长时直接被截断，支持滚动查看完整内容。

修改后的关键代码 #

class QuoteWidget extends StatelessWidget {
  const QuoteWidget({super.key, required this.child});
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 20),
      alignment: Alignment.center,
      child: AppCustomClipPath(
        shadow: Shadow(
          color: Colors.grey.withOpacity(0.5), //阴影颜色
          blurRadius: 15, //模糊半径
          offset: const Offset(0, 2),
        ),
        clipper: CustomQuotePainter(),
        child: Container(
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 0.6,
            maxWidth: MediaQuery.of(context).size.width,
          ),
          color: Colors.white,
          // 保留左右和顶部内边距，移除底部无效padding
          padding: const EdgeInsets.only(
            top: 15,
            left: 15,
            right: 15,
          ),
          child: Align(
            alignment: Alignment.topCenter, //文本区域靠上对齐
            child: SingleChildScrollView( //支持长文本滚动
              child: Text(
                "Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum  Lorem Impsum Lorem    Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem       Impsum",
                style: Theme.of(context)
                    .textTheme
                    .displaySmall!
                    .copyWith(color: Colors.black),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

额外优化（可选） #

如果希望更精准匹配裁剪区域的高度，可以给文本容器设置固定高度：

child: Align(
  alignment: Alignment.topCenter,
  child: SingleChildScrollView(
    child: SizedBox(
      // 高度设为容器最大高度的70%，和裁剪区域完全匹配
      height: MediaQuery.of(context).size.height * 0.6 * 0.7,
      child: Text(
        // ...文本内容
      ),
    ),
  ),
),

内容的提问来源于stack exchange，提问作者Faisal M