如何让ListView.builder内的列表项底部边框铺满宽度？

问题描述 #

开发包含所有国家的列表时，为每个列表项添加灰色底部边框后，边框左右两侧被截断，无法铺满ListView的完整宽度。

• 预期效果：列表项底部边框完全覆盖ListView的宽度
• 实际效果：边框左右存在留白，未铺满宽度

原代码如下：

class Countries extends StatefulWidget {
  const Countries({super.key});

  @override
  State<Countries> createState() => _CountriesState();
}

class _CountriesState extends State<Countries> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
            height: 235,
            child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 12, right: 12),
                    child: Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: AppColors.gray2F2D2D),
                          borderRadius: BorderRadius.circular(8.0)),
                      child: Column(
                        children: [
                          Flexible(
                            child: ListView.builder(
                              itemCount: countries.length,
                              scrollDirection: Axis.vertical,
                              shrinkWrap: true,
                              itemBuilder: (context, index) {
                                return ListTile(
                                  title: Container(
                                    decoration: BoxDecoration(
                                      border: Border(
                                        bottom: BorderSide(width: 1, color: AppColors.gray2F2D2D)
                                      )
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.only(
                                        top: 16,
                                        bottom: 16,
                                        left: 20
                                      ),
                                      child: Text(
                                        countries[index],
                                        style: const TextStyle(
                                            color: AppColors.grayA0A0A0,
                                            fontSize: 16,
                                            fontWeight: FontWeight.w500),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
          ),
  }
}

问题原因 #

ListTile组件默认带有左右内边距（contentPadding），导致其内部的Container无法占据ListView的完整宽度，进而使边框被截断。

解决方案 #

方案1：替换ListTile为Container（推荐） #

直接用Container构建列表项，完全控制内边距和宽度，确保边框铺满整个ListView：

class Countries extends StatefulWidget {
  const Countries({super.key});

  @override
  State<Countries> createState() => _CountriesState();
}

class _CountriesState extends State<Countries> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 235,
      child: Padding(
        padding: const EdgeInsets.only(top: 8, left: 12, right: 12),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: AppColors.gray2F2D2D),
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Column(
            children: [
              Flexible(
                child: ListView.builder(
                  itemCount: countries.length,
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(width: 1, color: AppColors.gray2F2D2D),
                        ),
                      ),
                      padding: const EdgeInsets.only(
                        top: 16,
                        bottom: 16,
                        left: 20,
                      ),
                      child: Text(
                        countries[index],
                        style: const TextStyle(
                          color: AppColors.grayA0A0A0,
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

方案2：保留ListTile，清除默认内边距 #

若需保留ListTile的交互特性（如点击事件、leading/trailing元素），可设置contentPadding: EdgeInsets.zero移除默认内边距，再调整内部Container的内边距：

// 修改ListView.builder的itemBuilder部分
itemBuilder: (context, index) {
  return ListTile(
    contentPadding: EdgeInsets.zero, // 清除ListTile默认内边距
    title: Container(
      padding: const EdgeInsets.only(
        top: 16,
        bottom: 16,
        left: 20,
      ),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 1, color: AppColors.gray2F2D2D),
        ),
      ),
      child: Text(
        countries[index],
        style: const TextStyle(
          color: AppColors.grayA0A0A0,
          fontSize: 16,
          fontWeight: FontWeight.w500,
        ),
      ),
    ),
  );
},

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