Flutter如何实现无换行无空格的横向滚动列表并点击显示索引？

要实现不换行、无额外间距、可横向滚动的连续列表项效果，同时支持点击显示索引，可以采用以下方案：

核心思路 #

• 使用ListView.builder并设置scrollDirection: Axis.horizontal，既保证大量数据的性能，又支持横向滚动避免溢出。
• 移除列表项的默认内边距/外边距，确保项与项之间无额外空格。
• 为每个列表项添加点击事件，通过SnackBar展示当前索引。

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("连续字符串式列表")),
        body: const HorizontalList(),
      ),
    );
  }
}

class HorizontalList extends StatelessWidget {
  const HorizontalList({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 100,
      padding: EdgeInsets.zero, // 移除列表整体内边距
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            // 点击时弹出索引信息
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text("点击了第 $index 项")),
            );
          },
          child: Container(
            padding: EdgeInsets.zero, // 移除项内边距
            margin: EdgeInsets.zero, // 移除项外边距
            child: Text("项 $index"),
          ),
        );
      },
    );
  }
}

关键细节说明 #

• 横向滚动设置：scrollDirection: Axis.horizontal让列表横向排列，超出屏幕部分可滚动，解决Row的溢出问题，同时避免Wrap自动换行。
• 无间距处理：通过EdgeInsets.zero设置列表的padding和每个项的padding/margin，确保项与项之间紧密相连，无额外空格。
• 点击事件：用GestureDetector包裹列表项，点击时通过SnackBar弹出索引信息，也可根据需求替换为其他展示方式（如更新页面文本）。

样式扩展（可选） #

如果需要自定义项的样式（比如添加分隔线、背景），可以调整Container属性，示例如下：

child: Container(
  padding: const EdgeInsets.symmetric(horizontal: 8),
  margin: EdgeInsets.zero,
  decoration: BoxDecoration(
    border: Border(right: BorderSide(color: Colors.grey.shade300)),
  ),
  child: Text("项 $index"),
),

这样既保留紧密排列，又能添加分隔线等样式，且不会产生多余空格。

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