Flutter PageView无法在网络上滑动(使用chrome网络浏览器)

Question

我想使用flutter web创建我的公文包，我从页面视图使用它在页面之间滑动，但页面视图不滑动这是我的代码，我流这个guid，但它不适用于我flutter PageView不可在web上滑动(桌面模式(

class CustomPageView extends StatefulWidget {
const CustomPageView({Key? key}) : super(key: key);
@override
State<CustomPageView> createState() => _CustomPageViewState();
}
class _CustomPageViewState extends State<CustomPageView> {
var controller;
@override
void initState() {
controller = PageController(
initialPage: 0,
keepPage: true,
);
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: customAppBar(),
key: Globals.scaffoldKey,
endDrawer: const CustomEndDrawer(),
backgroundColor: whiteColor,
body: PageView(
controller: controller,
scrollDirection: Axis.vertical,
onPageChanged: (index) {
print(index);
},
// ignore: prefer_const_literals_to_create_immutables
children: [
const Home(),
Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
)
]),
);
}
}

Answer 1

默认情况下，所有可滚动的小部件都不会在网络上用鼠标滚动。您可以通过将小部件包装为配置来覆盖该行为。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class MouseDraggableScrollBehavior extends MaterialScrollBehavior {
@override
Set<PointerDeviceKind> get dragDevices => <PointerDeviceKind>{
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
};
}

之后包装您的PageView:

ScrollConfiguration(
behavior: MouseDraggableScrollBehavior(),
child: yourPageViewWidget,
)