Flutter中如何实现组件对齐及箭头连接双图的UI？

针对你要做的两张图片用箭头连接的UI，给你两个简单易上手的方案，不用纠结Positioned的定位问题：

方案1：Row布局+箭头组件（适合简单箭头） #

如果是水平排列的两张图，直接用Row把图片和箭头组件放在一起，自动对齐，不用手动定位：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // 第一张图片
    Image.network('你的第一张图片URL', width: 100, height: 100),
    // 中间的箭头，用Icon或者自定义Widget
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Icon(Icons.arrow_forward, size: 24, color: Colors.grey),
    ),
    // 第二张图片
    Image.network('你的第二张图片URL', width: 100, height: 100),
  ],
)

如果需要更个性化的箭头（比如加粗、不同形状），可以用Container配合Transform，或者直接用Text组件放箭头符号（比如Text('→', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))）。

方案2：CustomPaint绘制自定义箭头（适合复杂样式） #

如果箭头需要和图片边缘精准连接，或者有特殊样式（比如折线、渐变箭头），用CustomPaint来画箭头更灵活：

Stack(
  alignment: Alignment.center,
  children: [
    // 两张图片用Row摆好
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.network('图1URL', width: 100, height: 100),
        SizedBox(width: 80), // 留空给箭头
        Image.network('图2URL', width: 100, height: 100),
      ],
    ),
    // 用CustomPaint画箭头
    CustomPaint(
      size: Size(80, 24), // 箭头区域的大小，对应上面的SizedBox宽度
      painter: ArrowPainter(),
    ),
  ],
)

// 自定义箭头Painter
class ArrowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    // 画箭杆
    canvas.drawLine(
      Offset(0, size.height / 2),
      Offset(size.width - 10, size.height / 2),
      paint,
    );
    // 画箭头
    canvas.drawLine(
      Offset(size.width - 10, size.height / 2),
      Offset(size.width - 20, 0),
      paint,
    );
    canvas.drawLine(
      Offset(size.width - 10, size.height / 2),
      Offset(size.width - 20, size.height),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

这个方法可以精准控制箭头的起点、终点和样式，调整Stack里的位置就能让箭头完美连接两张图的边缘。

如果你一定要用Positioned，可以先通过GlobalKey获取两张图片的RenderBox位置信息，计算箭头的起点和终点坐标后再定位箭头组件，但这个方法相对复杂，新手不太推荐。

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