Flutter技术问题：如何在ListView列表项旁绘制竖线

方法一：利用Container的BoxDecoration添加左侧边框 #

直接给每个列表项容器添加左侧边框，实现简单高效，适合纯色竖线需求：

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      decoration: BoxDecoration(
        color: Colors.amber[600],
        border: const Border(
          left: BorderSide(
            color: Colors.blue, // 竖线颜色
            width: 4, // 竖线宽度
          ),
        ),
      ),
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      decoration: BoxDecoration(
        color: Colors.amber[500],
        border: const Border(
          left: BorderSide(
            color: Colors.blue,
            width: 4,
          ),
        ),
      ),
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      decoration: BoxDecoration(
        color: Colors.amber[100],
        border: const Border(
          left: BorderSide(
            color: Colors.blue,
            width: 4,
          ),
        ),
      ),
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

竖线会和容器高度完全贴合，无需额外布局调整。

方法二：用Row拆分竖线与列表内容 #

如果需要定制竖线样式（比如圆角、渐变）或添加间距，可通过Row将竖线和内容分离：

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Row(
      children: [
        // 自定义侧边竖线
        Container(
          width: 4,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(2), // 竖线圆角效果
          ),
        ),
        const SizedBox(width: 8), // 竖线与内容的间距
        // 原列表项内容
        Expanded(
          child: Container(
            height: 50,
            color: Colors.amber[600],
            child: const Center(child: Text('Entry A')),
          ),
        ),
      ],
    ),
    const SizedBox(height: 8), // 列表项之间的间距
    Row(
      children: [
        Container(
          width: 4,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(2),
          ),
        ),
        const SizedBox(width: 8),
        Expanded(
          child: Container(
            height: 50,
            color: Colors.amber[500],
            child: const Center(child: Text('Entry B')),
          ),
        ),
      ],
    ),
    const SizedBox(height: 8),
    Row(
      children: [
        Container(
          width: 4,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(2),
          ),
        ),
        const SizedBox(width: 8),
        Expanded(
          child: Container(
            height: 50,
            color: Colors.amber[100],
            child: const Center(child: Text('Entry C')),
          ),
        ),
      ],
    ),
  ],
)

这种方式灵活性更高，可根据需求调整竖线的尺寸、样式和位置。

方法三：封装自定义组件优化代码复用 #

如果列表项数量较多，建议封装成独立组件，减少重复代码：

class ListItemWithSideLine extends StatelessWidget {
  final String text;
  final Color itemColor;
  final Color lineColor;
  final double lineWidth;

  const ListItemWithSideLine({
    super.key,
    required this.text,
    required this.itemColor,
    this.lineColor = Colors.blue,
    this.lineWidth = 4,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: lineWidth,
          height: 50,
          color: lineColor,
        ),
        const SizedBox(width: 8),
        Expanded(
          child: Container(
            height: 50,
            color: itemColor,
            child: Center(child: Text(text)),
          ),
        ),
      ],
    );
  }
}

// 使用示例
ListView(
  padding: const EdgeInsets.all(8),
  children: const <Widget>[
    ListItemWithSideLine(
      text: 'Entry A',
      itemColor: Color(0xFFFFB74D), // Colors.amber[600]十六进制值
    ),
    SizedBox(height: 8),
    ListItemWithSideLine(
      text: 'Entry B',
      itemColor: Color(0xFFFFCC80), // Colors.amber[500]十六进制值
    ),
    SizedBox(height: 8),
    ListItemWithSideLine(
      text: 'Entry C',
      itemColor: Color(0xFFFFF8E1), // Colors.amber[100]十六进制值
    ),
  ],
)

后续修改样式只需调整组件内部，无需逐个修改列表项。

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