Flutter：如何在ListView的文本下方添加下划线？

要给水平ListView里的每个文本项下方添加线条，只需调整每个InkWell的子组件结构，同时优化代码减少冗余，具体修改如下：

修改思路 #

把每个InkWell的子组件从单一Text改成垂直排列的Column，在文本下方添加一个容器作为下划线；同时将重复的标签逻辑提取成通用方法，避免代码重复。

修改后的完整代码 #

SizedBox(
  height: 40, // 适当调高高度，容纳文本和下划线
  child: Row(
    children: [
      Expanded(
        child: Padding(
          padding: const EdgeInsets.only(top: 13, left: 25),
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              _buildTabItem('Arts'),
              _buildTabItem('Biography'),
              _buildTabItem('Romance'),
              _buildTabItem('Thriller'),
              _buildTabItem('Fiction'),
              _buildTabItem('Crime'),
              _buildTabItem('Movies'),
              _buildTabItem('Religious'),
              _buildTabItem('Philosophy'),
            ],
          ),
        ),
      ),
    ],
  ),
),

// 提取通用标签组件，简化重复代码
Widget _buildTabItem(String title) {
  return Padding(
    padding: const EdgeInsets.only(right: 10),
    child: InkWell(
      onTap: () {},
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            title,
            style: const TextStyle(
              color: Color.fromARGB(255, 151, 151, 151),
            ),
          ),
          const SizedBox(height: 2), // 文本与下划线的间距
          Container(
            height: 1.5,
            width: double.infinity, // 下划线宽度与文本保持一致
            color: const Color.fromARGB(255, 151, 151, 151),
          ),
        ],
      ),
    ),
  );
}

优化说明 #

1. 用Column实现文本+下划线的垂直布局，确保元素居中对齐
2. 提取_buildTabItem方法，后续修改样式或点击逻辑只需维护一处
3. 调高外层SizedBox高度，避免内容超出容器范围
4. 用Padding替代分散的SizedBox(width:10)，布局更规整

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