Flutter中如何去除ListTile前置图标的上下边框？

你当前的代码给整个ListTile添加上下边框，导致前置图标也被边框包裹。要实现图标区域无上下边框的效果，最直接的方式是拆分布局，让边框只作用在文字内容区域，而非整个ListTile。

推荐两种实现方式：

方式一：用Row自定义布局（更灵活） #

直接拆分图标和内容区域，给右侧内容单独添加上下边框：

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // 前置图标，无边框
    const Icon(Icons.person, size: 32),
    // 带上下边框的内容区域
    Expanded(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
        decoration: const BoxDecoration(
          border: Border(
            top: BorderSide(width: 1, color: Colors.grey),
            bottom: BorderSide(width: 1, color: Colors.grey),
          ),
        ),
        child: const Text("Contact", style: TextStyle(fontSize: 16)),
      ),
    ),
  ],
)

方式二：基于ListTile改造 #

如果想保留ListTile的交互特性（比如点击效果），可以给title外层套Container并设置边框，同时调整ListTile的内边距：

ListTile(
  leading: const Icon(Icons.person, size: 32),
  contentPadding: const EdgeInsets.only(left: 0, right: 16),
  title: Container(
    padding: const EdgeInsets.symmetric(vertical: 12),
    decoration: const BoxDecoration(
      border: Border(
        top: BorderSide(width: 1, color: Colors.grey),
        bottom: BorderSide(width: 1, color: Colors.grey),
      ),
    ),
    child: const Text("Contact", style: TextStyle(fontSize: 16)),
  ),
  onTap: () {
    // 保留ListTile的点击逻辑
  },
)

两种方式都能让前置图标区域避开上下边框，符合你需要的效果。

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