Flutter PageView 无法在网页上滑动(桌面模式)

2024-01-07

我是新来的扑腾。 我在其文档的帮助下实现了 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(使用前将#替换为@)

Flutter PageView 无法在网页上滑动(桌面模式) 的相关文章

  • 如何在 Flutter 的 widget 树中打开新的 MaterialPageRoute 作为子项

    在下面的示例中 当我推送新的 MaterialPageRoute 时 它 会在与 Flutter 小部件树中的 Home 小部件相同的级别上创建 我希望将它作为小部件 Home 的子部件 因此 Home 将是 Child 小部件的父部件 这
  • 必须提供一个函数体。尝试添加函数体

    我自己写的 因为statefulwidget没有自动创建模式 并且在 7 个不同的错误中我无法修复这个问题 import package flutter material dart class NaberMain extends State
  • get.put 和 get.lazyput 之间的区别

    我是新来的Getx的依赖注入 有人可以向我解释一下它的好处吗 Get put and Get lazyPut 并告诉我它们有什么区别 简短回答 Get put 会放立即地 Get lazyPut 会放在什么时候你需要它
  • 颤振接触选择器

    我在我的 flutter 应用程序中使用 contact picker 来从手机联系人中获取联系人 当我单击电话簿中的联系人姓名时 应用程序崩溃 这是代码 import package flutter material dart impor
  • flutter中api调用哪种方式最好

    我是颤振开发的新手 最近听说了Dio和Http包用于api调用 这是 api 调用的最佳选择 如果有人有更好的api服务方式 CreateAccountRepository internal static final CreateAccou
  • 使用 Swift 和 Kotlin 重新创建 Flutter 的 ios 和 android 文件夹

    您好 我刚刚发现可以使用 Swift 和 Kotlin 创建 Flutter 项目 但是 我已经投资了当前的项目 并希望重新创建ios and android如 Swift 和 Kotlin 目前默认为 Java 和 ObjC Thanks
  • 日期时间时区反序列化

    我为我的应用程序开发了一个 Rest API 它以以下格式发送到应用程序日期2018 09 07T17 29 12 02 00 我猜 2 00 代表我的时区作为一个对象的一部分 在我的 Flutter 应用程序中 一旦我反序列化接收到的对象
  • flutter 聊天应用程序上的消息顺序不正确

    我刚刚根据教程完成了一个基本的聊天应用程序 新消息应该显示在底部 但这种情况没有发生 当我删除 保存并再次添加时reversed排队 final messages snapshot data documents reversed 然后它似乎
  • Flutter sqflite 插入列表

    我正在尝试将列表插入到 flutter 中的 sql 数据库中 但我不知道该怎么做 有人可以帮助我吗 当我初始化 mi 数据库时 我有这个 Directory documentsDirectory await getApplicationD
  • Flutter Google 日历 Api 列表事件

    Flutter Google 日历 API v3https pub dartlang org packages googleapis https pub dartlang org packages googleapis Works Futu
  • 如何实现Tabbar中每个选项卡的搜索动作

    我有一个页面 TabBar 中有 2 个选项卡 如下所示 class SearchByCityOrPerson extends StatefulWidget SearchByCityOrPerson Key key this title s
  • Flutter 错误:找不到正确的 ScopedModel

    我正在尝试在我的 flutter 项目中创建一个范围模型 但我似乎无法弄清楚为什么会出现错误 这个作用域模型实现有什么问题 我有一个带有底部导航器的主页 在个人资料选项卡中 我在树深处的小部件中获取了我需要的关注者列表 因此我尝试使用sco
  • 如何通过与flutter cloud firestore插件中的日期比较来获取记录?

    正在开发一个 flutter 应用程序 我使用 firebase cloud firestore 来存储我的所有文档 我的文档有一个开始日期时间字段的格式如下 我想获取 startDateTime 大于或等于当前日期的所有记录 这是我的颤振
  • 在桌面应用程序中将发票打印到 USB 打印机

    我正在开发 flutter 桌面应用程序 我需要将发票打印到 USB 打印机 https pub flutter io cn packages printing https pub flutter io cn packages printi
  • Flutter-iOS 当应用程序更新/重新编译时存储的图像丢失

    嗨 请原谅我的英语 也是 flutter iOS 的新手 我在 iOS 上有一个关于 flutter 的应用程序 用户可以从他们的相机和图库中拍摄照片和视频 我正在使用 image picker 包 这没有问题 然后我将其保存在在其应用程序
  • 如何在 Flutter 中显示 Android Activity?

    我目前正在开发一个在 flutter 中使用 Google Maps Api 的应用程序 由于支持不完整 我只能使用静态地图 点击它会导致 Android 活动没有用 我需要的是一张地图 我可以在其中搜索位置并向该位置添加标记 那么是否可以
  • Flutter Firebase 身份验证:启动延迟

    我在应用程序中使用 Provider 和流 FirebaseAuth instance onAuthStateChanged 来决定启动时重定向到哪里 但是尽管用户已经登录 从之前的启动 但应用程序在登录屏幕上启动 几乎 1 秒后重定向到主
  • 如何在Flutter中保存图像文件?使用 Image_picker 插件选择的文件

    我真的很困惑 Flutter 很棒 但有时会让人困惑 所有代码都完成了 所选文件也在预览中显示 但我尝试将该文件保存在本地 Android 存储中 我无法获得成功 Future getImage ImageSource imageSourc
  • iOS 有 INTERNET 权限吗?

    我在 iOS 设备上的 flutter dio 包上遇到了一个奇怪的问题 我编写了一个向 url 发送 GET 请求的应用程序 Android 上一切正常 但 iOS 上的请求似乎无法通过 没有发生任何错误 什么也没有 我在 Android
  • Flutter Web URL 路由不适用于真实域

    我正在尝试使用一个网址来获取参数并将该参数分配给网络文件内的变量 例如 我的域名是 example com 在这个网站中我需要用户的 ID 我想制作 example com id 123 并获取 123 id 并给出变量 123 值 在 f

随机推荐