我是新来的扑腾。
我在其文档的帮助下实现了 flutter PageView:
/// Flutter code sample for PageView
// Here is an example of [PageView]. It creates a centered [Text] in each of the three pages
// which scroll horizontally.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final PageController controller = PageController(initialPage: 0);
return PageView(
/// [PageView.scrollDirection] defaults to [Axis.horizontal].
/// Use [Axis.vertical] to scroll vertically.
scrollDirection: Axis.horizontal,
controller: controller,
children: const <Widget>[
Center(
child: Text('First Page'),
),
Center(
child: Text('Second Page'),
),
Center(
child: Text('Third Page'),
)
],
);
}
}
我在 Android 上运行它,效果很好。
它也适用于网络(移动模式)。
但是当我在 chrome(网页|桌面)上运行它时,页面不可滑动,并且无法更改页面。
如何在 Web 桌面上启用滑动导出?
颤振版本是2.5.2
感谢 Bigfoot,为了支持鼠标滑动,我们需要通过以下步骤更改应用程序的默认滚动行为:
1-创建一个类,并扩展它MaterialScrollBeavior
,并覆盖dragDevices
:
class AppScrollBehavior extends MaterialScrollBehavior {
@override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
};
}
2-将AppScrollBehavior实例传递给MaterialApp的scrollBehavior属性:
MaterialApp(
scrollBehavior: AppScrollBehavior(),
...
);
之后,我们也可以用鼠标在页面之间滑动。
更新颤振3.3:
从 flutter 3.3 开始,笔记本电脑上的触控板不支持滚动和滑动操作,如果您也需要支持触控板,则需要添加PointerDeviceKind.trackpad
像这样拖动设备:
class AppScrollBehavior extends MaterialScrollBehavior {
@override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
PointerDeviceKind.trackpad,
};
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)