如何在 Kirigami ScrollablePage 中使用箭头键滚动？

Posted 2023-02-16

【中文标题】如何在 Kirigami ScrollablePage 中使用箭头键滚动？

【英文标题】：How to scroll with arrow keys in a Kirigami ScrollablePage?

【发布时间】：2020-07-11 19:49:32

【问题描述】：

基于 Qt QML 的移动/桌面融合 UI 框架 Kirigami 提供 QML 类型 ScrollablePage 以支持滚动内容。如果它大于 ScrollablePage 本身，则将任何可视 QML 项放入其中会自动使其可滚动：

ScrollablePage 是一个包含可滚动内容的 Page，例如 ListViews。

滚动和滚动指示器将被自动管理。

Kirigami.ScrollablePage 
    id: root
    //The rectangle will automatically be scrollable
    Rectangle 
        width: root.width
        height: 99999
    

(source)

这提供了滚动条，并允许使用鼠标滚轮滚动、使用触摸板进行两指滚动以及轻弹（“单击并抛出”）滚动，就像我们在触摸屏设备上习惯的那样。

但是，它不允许使用任何键盘键（向上/向下箭头、向上/向下翻页）滚动。我怎样才能做到这一点？执行 Keys.onUpPressed: scrollBar.decrease() 的 usual approach 不起作用，因为 ScrollablePage 的滚动条不能作为其公共 API 的一部分访问。

【参考方案1】：

说明

使用Flickable 包装您放入ScrollablePage 的内容项。然后评估Flickable 中的按键事件并作为响应执行flick() 以滚动视图。示例（结合示例from the Kirigami manual 和from the Qt manual）：

Kirigami.ScrollablePage 
    id: root

    Flickable 
        focus: true
        topMargin: 20; leftMargin: 20; bottomMargin: 20; rightMargin: 20

        Keys.onUpPressed:   flick(0,  800)
        Keys.onDownPressed: flick(0, -800)

        Rectangle 
            width: root.width
            height: 5000
        
    

详细说明

虽然您无法访问滚动条，但您可以访问滚动条用于移动视图的内容：Flickable 实例。你只需要把它包裹在页面的内容上。如果你不这样做，ScrollablePage 无论如何都会在内部使用 ScrollView 到 wrap your page's content in a Flickable，但是你没有引用它来执行 flick()。

执行flick()与用户滑动元素时相同，所以滚动条位置等都会更新好。

如果它仍然不起作用，那么 (1) 可能您给 Flickable::flick() 提供的像素/秒值太小以至于滚动不可见，或者 (2) 可能您平台上的初始 Flickable::flickDeceleration 值搞砸了。这些值是特定于平台的，因此可能需要一些实验。在某些平台上，在 flick() will help 期间将它们设置为零，而在 Linux 下，这正是防止任何滚动移动的值。

上述解决方案无需启用ScrollablePage::keyboardNavigationEnabled，因为这仅用于使用箭头键（见下文）移动合适内容的currentItem，而不用于一般滚动。如果您的页面内容是项目视图（ListView、GridView 等），它甚至会阻止普通滚动。

项目视图的替代解决方案

如果 ScrollablePage 的内容是项目视图（任何具有 currentItem 属性的 QML 对象，例如 ListView 或 GridView），那么不要将该内容包装在 Flickable 中，只需启用 @ 987654328@。它允许您使用向上箭头键和向下箭头键移动currentItem。这就是人们通常想要的这些视图，即使它不是滚动而是键盘导航。