QML QtQuick.Controls 2.2 ScrollView - 如何禁用水平滑动？答案

【问题标题】：QML QtQuick.Controls 2.2 ScrollView - how to disable horizontal flicking?QML QtQuick.Controls 2.2 ScrollView - 如何禁用水平滑动？
【发布时间】：2017-11-28 21:13:27
【问题描述】：

在使用我声明的 QtQuick.Controls 2.2 ScrollView 时，我试图仅禁用水平滑动（只有垂直滚动和滑动内容）：

ScrollView {
    anchors.fill: parent
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
}

我试过了

ScrollView {
    anchors.fill: parent
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

    Flickable.flickableDirection: Flickable.VerticalFlick
}

但 Android 应用程序正在静默崩溃。

如何只禁用水平滑动和滚动而垂直滑动和滚动？

【问题讨论】：

标签： android qml scrollview qtquick2 qtquickcontrols2

【解决方案1】：

只需指定ScrollView::contentWidth。

此属性保存可滚动内容的宽度。

如果在 ScrollView 中只使用单个项目，则内容大小为根据其包含的隐式大小自动计算项目。

ScrollView {
    contentWidth: -1
    anchors.fill: parent

    Text {
        text: "ABC"
        font.pixelSize: 512
    }
}

【讨论】：

谢谢，我试过了，但它只显示“ABC”，没有垂直滑动和滚动（我已经复制了 10 次 Text 以获得垂直滚动的内容）。我认为很明显我只想禁用水平轻弹但有垂直滚动和轻弹。我应该澄清我的问题。
其实我也用过ListView，不过还是对这种方式很好奇
文本元素只是虚拟示例内容。如果内容足够高，则可以垂直滚动。该示例的重点是展示如何根据您的要求禁用水平滚动。说到 ListView，一个垂直的 ListView 默认没有水平滚动。您必须明确覆盖内容宽度才能使其水平滚动。
我重复了 Text {...} 10 次，所以滚动的内容相当大，但它不起作用，我检查过。
实际上，我已经通过 ColumnLayout 包装了 10 个 Text {}，以便拥有一个非常长的 ScrollView 子项。通过这种方式，内容看起来像预期的那样 - 比滚动视图更长，但仍然不可滚动。

【解决方案2】：

ScrollView {
        id: svId
        anchors.fill: parent
        contentWidth: textId.width
        Text {
            id: textId
            width: svId.width    //Can't use parent.width
            text: "this is a long text"
            wrapMode: Text.WordWrap
        }
    }

【讨论】：

【解决方案3】：

ScrollView 确实有一个名为availableWidth 的属性。在Qt文档中是这样写的，

如果您希望 ScrollView 仅垂直滚动，您可以将 contentWidth 绑定到 availableWidth（对于 contentHeight 反之亦然）。这将使内容水平填充 ScrollView 内的所有可用空间，同时考虑任何填充或滚动条。

所以你只需要将 ScrollView 的 contentWidth 设置为 availableWidth 即可。

https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollview.html#details

【讨论】：