列表视图.build不能在Web上滚动

Question

我只在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]),
);
},
),
),
);
}
}

Answer 1

只需在材质应用程序main中添加滚动行为。dart
添加这些行。

scrollBehavior: MaterialScrollBehavior().copyWith(
dragDevices: {PointerDeviceKind.mouse, PointerDeviceKind.touch, PointerDeviceKind.stylus, PointerDeviceKind.unknown},
),

和导入手势包。你的网页滚动条可以正常工作

Answer 2

用滚动条换行

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]),
);
},
),
),
),
);
}
}