如何在Flutter中绘制类似Facebook评论区的曲线？

这个效果是嵌套评论的左侧层级引导线，优先用CustomPainter自定义绘制实现，还原度最高，具体实现步骤如下：

• 先定义评论数据结构，每个评论对象携带level层级参数、子评论列表，根评论层级为1，子评论层级为父评论层级+1
• 封装自定义绘制类，根据当前评论的层级绘制对应数量的引导线：
  • 层级大于1时，前level-1层绘制通顶的垂直直实线，线宽1px，颜色选浅灰色即可匹配Facebook样式
  • 第level层绘制L型圆角曲线：先垂直向下延伸到评论内容垂直居中位置，拐角做2px圆角处理后向右水平延伸8px，对齐用户头像左侧位置
• 递归渲染评论列表，每个评论项用Stack布局，底层放自定义绘制的引导线，上层放评论内容，内容左侧设置对应缩进避免遮挡引导线

核心绘制代码示例：

class CommentGuidePainter extends CustomPainter {
  // 当前评论层级
  final int level;
  // 每层缩进宽度，建议设为24
  final double indentPerLevel;
  // 引导线颜色
  final Color lineColor;
  // 引导线宽度
  final double lineWidth;

  CommentGuidePainter({
    required this.level,
    this.indentPerLevel = 24,
    this.lineColor = const Color(0xFFE4E6EB),
    this.lineWidth = 1,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = lineColor
      ..strokeWidth = lineWidth
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    // 绘制前n-1层的通顶竖线
    for (int i = 1; i < level; i++) {
      final x = i * indentPerLevel - indentPerLevel / 2;
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);
    }

    // 绘制最后一层的L型圆角引导线
    if (level > 1) {
      final lastLineX = level * indentPerLevel - indentPerLevel / 2;
      final cornerY = size.height / 2;
      // 垂直段
      canvas.drawLine(Offset(lastLineX, 0), Offset(lastLineX, cornerY - 2), paint);
      // 圆角拐角
      canvas.drawRRect(
        RRect.fromRectAndRadius(
          Rect.fromLTWH(lastLineX, cornerY - 2, 2, 2),
          const Radius.circular(2),
        ),
        paint,
      );
      // 水平段
      canvas.drawLine(Offset(lastLineX + 2, cornerY), Offset(lastLineX + 8, cornerY), paint);
    }
  }

  @override
  bool shouldRepaint(covariant CommentGuidePainter oldDelegate) {
    return oldDelegate.level != level || oldDelegate.lineColor != lineColor;
  }
}

使用方式：在评论项的Stack组件中先放置CustomPaint使用上述绘制类，再放置评论内容组件，给内容组件设置EdgeInsets.only(left: level * 24)的左侧内边距即可。如果需要适配评论收起/展开交互，只需要动态更新子评论的层级参数即可自动适配引导线绘制逻辑。

内容的提问来源于stack exchange，提问作者Gbenga B Ayannuga