如何自定义实现Widget间虚线连接？动态场景适配咨询

核心思路 #

普通Divider无法满足两点连线的需求，要实现Card/Container这类Widget特定点（比如左中心点）的动态连线，需要结合布局位置获取和自定义绘制来处理，同时适配UI高度变化的场景。

具体实现方法 #

方法一：精准连接指定点（适配动态高度） #

通过GlobalKey获取Widget的布局位置，结合CustomPaint绘制线条，能精准连接两个Widget的左中心点，且自动适配高度变化：

1. 给每个需要连接的Widget绑定GlobalKey，用于获取其RenderBox布局信息。
2. 用Stack作为父容器，将线条和目标Widget放在同一层级。
3. 监听布局完成事件，实时计算两个Widget的左中心点坐标，更新线条位置。

示例代码：

class ConnectedCards extends StatefulWidget {
  @override
  _ConnectedCardsState createState() => _ConnectedCardsState();
}

class _ConnectedCardsState extends State<ConnectedCards> {
  final GlobalKey _card1Key = GlobalKey();
  final GlobalKey _card2Key = GlobalKey();
  Offset _card1LeftCenter = Offset.zero;
  Offset _card2LeftCenter = Offset.zero;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateLinePos());
  }

  void _updateLinePos() {
    final renderBox1 = _card1Key.currentContext?.findRenderObject() as RenderBox?;
    final renderBox2 = _card2Key.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox1 != null && renderBox2 != null) {
      setState(() {
        // 获取左中心点的全局坐标，再转为Stack内的局部坐标
        final card1Global = renderBox1.localToGlobal(Offset(0, renderBox1.size.height / 2));
        final card2Global = renderBox2.localToGlobal(Offset(0, renderBox2.size.height / 2));
        final stackRender = context.findRenderObject() as RenderBox?;
        if (stackRender != null) {
          _card1LeftCenter = stackRender.globalToLocal(card1Global);
          _card2LeftCenter = stackRender.globalToLocal(card2Global);
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    // 布局变化时自动更新线条
    return LayoutBuilder(
      builder: (context, constraints) {
        WidgetsBinding.instance.addPostFrameCallback((_) => _updateLinePos());
        return Stack(
          children: [
            // 自定义绘制连接线
            CustomPaint(
              painter: LinePainter(start: _card1LeftCenter, end: _card2LeftCenter),
              size: Size.infinite,
            ),
            // 目标Widget布局（这里模拟动态高度）
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  key: _card1Key,
                  width: 200,
                  height: 100 + Random().nextInt(60),
                  color: Colors.blue.shade300,
                  margin: EdgeInsets.symmetric(vertical: 20),
                ),
                Container(
                  key: _card2Key,
                  width: 200,
                  height: 100 + Random().nextInt(60),
                  color: Colors.green.shade300,
                  margin: EdgeInsets.symmetric(vertical: 20),
                ),
              ],
            ),
          ],
        );
      },
    );
  }
}

// 自定义画笔类
class LinePainter extends CustomPainter {
  final Offset start;
  final Offset end;

  LinePainter({required this.start, required this.end});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2
      ..strokeCap = StrokeCap.round;
    canvas.drawLine(start, end, paint);
  }

  @override
  bool shouldRepaint(covariant LinePainter oldDelegate) {
    return oldDelegate.start != start || oldDelegate.end != end;
  }
}

方法二：垂直整段连线（适合线性排列场景） #

如果Widget是垂直排列，只需要左侧/右侧的整段垂直连线，可以用IntrinsicHeight+Row快速实现，自动适配高度变化：

IntrinsicHeight(
  child: Row(
    children: [
      // 垂直连接线
      Container(
        width: 2,
        color: Colors.black,
        margin: EdgeInsets.only(left: 12),
      ),
      Expanded(
        child: Column(
          children: [
            Container(
              height: 120,
              color: Colors.blue.shade300,
              margin: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
            ),
            Container(
              height: 150,
              color: Colors.green.shade300,
              margin: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
            ),
          ],
        ),
      ),
    ],
  ),
)

这种方式无需手动计算坐标，但只能实现整段垂直连线，无法精准连接两个Widget的中心点。

动态高度适配注意事项 #

• 获取Widget位置时，必须在布局完成后（比如addPostFrameCallback）调用，否则无法拿到正确的坐标。
• 当Widget高度因内容更新变化时，LayoutBuilder会触发重绘，此时重新计算坐标即可让线条自动更新。
• 列表中的连线Item需封装为独立StatefulWidget，避免GlobalKey冲突。

内容的提问来源于stack exchange，提问作者Aminul Islam