Flutter中如何为List Tile添加三条竖线？求更优实现方案

你原本的 Stack 嵌套方案可行，但有更简洁的实现方式，推荐以下几种：

方案一：自定义 ListTile 的 leading #

直接利用 ListTile 的 leading 属性，自定义包含三条竖线的 Widget，无需额外嵌套 Stack，结构更清晰：

ListTile(
  leading: Container(
    width: 4,
    margin: EdgeInsets.symmetric(vertical: 8),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(child: Container(color: Colors.blue)),
        SizedBox(height: 4),
        Expanded(child: Container(color: Colors.blue)),
        SizedBox(height: 4),
        Expanded(child: Container(color: Colors.blue)),
      ],
    ),
  ),
  title: Text('示例内容'),
  subtitle: Text('这是带三条竖线的 ListTile'),
  tileColor: Colors.white,
)

方案二：用 Row 包裹 ListTile 与竖线容器 #

如果需要竖线贯穿整个 Card 高度，可将竖线和 ListTile 放在同一个 Row 中，外层用 Card 包裹：

Card(
  child: Row(
    children: [
      // 左侧三条竖线
      Container(
        width: 4,
        margin: EdgeInsets.symmetric(horizontal: 8),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: List.generate(3, (index) => Expanded(
            child: Container(
              margin: EdgeInsets.symmetric(vertical: 2),
              color: Colors.blue,
            ),
          )),
        ),
      ),
      // 占据剩余宽度的 ListTile
      Expanded(
        child: ListTile(
          title: Text('示例内容'),
          subtitle: Text('竖线贯穿 Card 高度'),
        ),
      ),
    ],
  ),
)

方案三：CustomPaint 绘制竖线 #

如果需要更灵活的样式（比如不同颜色、间距），可以用 CustomPaint 自定义绘制：

ListTile(
  leading: CustomPaint(
    size: Size(4, 56), // 设定绘制区域大小
    painter: ThreeLinesPainter(color: Colors.blue),
  ),
  title: Text('自定义绘制的竖线'),
)

// 自定义画笔
class ThreeLinesPainter extends CustomPainter {
  final Color color;

  ThreeLinesPainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color..strokeWidth = size.width;
    // 计算三条线的位置
    final lineSpacing = size.height / 4;
    canvas.drawLine(
      Offset(size.width/2, lineSpacing),
      Offset(size.width/2, lineSpacing * 2),
      paint,
    );
    canvas.drawLine(
      Offset(size.width/2, lineSpacing * 2 + 2),
      Offset(size.width/2, lineSpacing * 3),
      paint,
    );
    canvas.drawLine(
      Offset(size.width/2, lineSpacing * 3 + 2),
      Offset(size.width/2, lineSpacing * 4),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return (oldDelegate as ThreeLinesPainter).color != color;
  }
}

这些方案都比你原本的 Stack 嵌套更简洁，避免了不必要的 Widget 层级嵌套，性能和可读性更好。

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