Flutter垂直ListView实现整页横向滚动的方法

需求说明 #

需要实现一个可纵向滚动的ListView，列表项包含超长文本且不允许自动换行，要求整个列表区域可横向滚动以显示全部文本，而非单个列表项独立横向滚动。此前尝试的两种方案（外层固定宽度的SingleChildScrollView、单个列表项加横向滚动）均无法满足需求。

解决方案 #

通过提前计算最长文本宽度，让ListView自适应内容宽度，再配合外层横向滚动的SingleChildScrollView，实现整页横向滚动+纵向滚动的效果。这种方法性能更优，避免了IntrinsicWidth遍历大量子项带来的性能损耗。

完整代码示例 #

import 'dart:ui';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        scrollBehavior: MyCustomScrollBehavior(),
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const HomePage());
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double? maxTextWidth;

  @override
  void initState() {
    super.initState();
    // 计算最长文本的宽度（取最大索引对应的文本）
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final textStyle = DefaultTextStyle.of(context).style;
      final longestText = "999999999 very long long long long long long long long long"
          "long long long long long long long long long long long"
          "long long long long long long long long long long long"
          "long long long long long long long long long long long"
          "long long long long long long long long long long text";
      
      final textPainter = TextPainter(
        text: TextSpan(text: longestText, style: textStyle),
        maxLines: 1,
        textDirection: TextDirection.ltr,
      )..layout(minWidth: 0, maxWidth: double.infinity);
      
      // 加上容器的左右padding（10*2）
      setState(() {
        maxTextWidth = textPainter.width + 20;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView example'),
      ),
      body: maxTextWidth == null 
          ? const Center(child: CircularProgressIndicator()) 
          : SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: SizedBox(
                width: maxTextWidth,
                child: ListView.builder(
                  itemExtent: 50,
                  itemCount: 1000 * 1000 * 1000,
                  itemBuilder: (context, index) {
                    return Container(
                      padding: const EdgeInsets.all(10),
                      color: index % 2 == 0 ? Colors.white : const Color(0xFFEFEFEF),
                      child: Text(
                        "$index very long long long long long long long long long"
                        "long long long long long long long long long long long"
                        "long long long long long long long long long long long"
                        "long long long long long long long long long long long"
                        "long long long long long long long long long long text",
                        softWrap: false,
                      ),
                    );
                  },
                ),
              ),
            ),
    );
  }
}

代码说明 #

1. 宽度计算：在initState中通过TextPainter计算最长文本的宽度，确保ListView的宽度能容纳最长的列表项文本，同时加上容器的内边距预留空间。
2. 滚动嵌套：外层SingleChildScrollView设置横向滚动，包裹自适应宽度的ListView，实现整页横向滚动；ListView保持纵向滚动功能，满足长列表的上下滑动需求。
3. 文本控制：列表项的Text设置softWrap: false，禁止文本自动换行，确保超长文本以单行形式展示。

方案对比 #

• 不推荐使用IntrinsicWidth：虽然能让ListView自适应宽度，但当列表项数量极大时（如示例中的1e9个），会因遍历所有子项计算宽度导致严重性能问题。
• 单个列表项加横向滚动：仅能实现单条列表项的独立横向滚动，无法满足整页同步横向滚动的需求，不符合业务场景。

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