Listview.build 不在 Web 上滚动

Posted 2023-02-23

【中文标题】Listview.build 不在 Web 上滚动

【英文标题】：Listview.build does not scroll on Web

【发布时间】：2021-11-15 13:27:05

【问题描述】：

我只在 Dartpad 上试过这个，Listview 不滚动！我的代码基于https://flutter.dev/docs/cookbook/lists/long-lists。

我的初衷是测试水平滚动，结果发现垂直滚动也不行！

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

void main() 
  runApp(
    MyApp(
      items: List<String>.generate(100, (i) => 'Item $i'),
    ),
  );


class MyApp extends StatelessWidget 
  final List<String> items;

  const MyApp(Key? key, required this.items) : super(key: key);

  @override
  Widget build(BuildContext context) 
    const title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) 
            return ListTile(
              title: Text(items[index]),
            );
          ,
        ),
      ),
    );
  

【问题讨论】：

在SingleChildScrollView 中添加您的小部件，参考我的回答here 希望对您有所帮助

添加MaterialApp( scrollBehavior: MaterialScrollBehavior().copyWith( dragDevices: PointerDeviceKind.mouse, ),

@pskink 它有效！谢谢你。这对在手机上使用网络应用程序的用户有什么改变吗？

当用户在手机上运行 Web 应用程序时，显然启用了 dragDevices 以在手机上禁用鼠标拖动。也不推荐api.flutter.dev/flutter/widgets/ScrollBehavior/dragDevices.html

【参考方案1】：

用滚动条换行

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

void main() 
  runApp(
    MyApp(
      items: List<String>.generate(100, (i) => 'Item $i'),
    ),
  );


class MyApp extends StatelessWidget 
  final List<String> items;

  const MyApp(Key? key, required this.items) : super(key: key);

  @override
  Widget build(BuildContext context) 
    const title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Scrollbar(
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) 
              return ListTile(
                title: Text(items[index]),
              );
            ,
          ),
        ),
      ),
    );
  

【讨论】：

这适用于设置为 Scrollbar 和 ListView.builder 的 ScrollController