如何在QML中使滚动条始终在Flckable上可见

Question

我想让Scrollbar.vertical在可闪烁区域总是可见的。当前，它在单击时可见。此外，文本区域与滚动条重叠。如何在下面的qml代码中创建带文本区域的滚动条

​

import QtQuick 2.0
import QtQuick.Controls 2.0

Flickable {
    id: flickable
    anchors.fill: parent


    TextArea.flickable: TextArea {
        text: "The Qt QML module provides a framework for developing applications and libraries with the QML language.
It defines and implements the language and engine infrastructure, and provides an API to enable application developers to
extend the QML language with custom types and integrate QML code with JavaScript and C++.

The Qt QML module provides both a QML API and a C++ API.
Note that while the Qt QML module provides the language and infrastructure for QML applications,
the Qt Quick module provides many visual components, model-view support, an animation framework,
and much more for building user interfaces.
For those new to QML and Qt Quick, please see QML Applications for an introduction to writing QML applications."
        wrapMode: TextArea.Wrap
        font.pixelSize: 20
    }
    ScrollBar.vertical: ScrollBar {
        width: 40
    }
}

Answer 1

如果升级到Qt 5.9，QtQuick.Controls 2.2引入了一个policy属性，它可以提供帮助，例如

import QtQuick 2.0
import QtQuick.Controls 2.2

Flickable {
    id: flickable
    ...
    ScrollBar.vertical: ScrollBar {
        width: 40
        anchors.left: parent.right // adjust the anchor as suggested by derM
        policy: ScrollBar.AlwaysOn
    }
}

Answer 2

似乎BaCaRoZzo建议的active-property每隔几秒钟就会被计时器覆盖一次，如果它只是设置为true的话。因此，每次都可以使用onActiveChanged-signal将其重置为true。

但是，您也可以通过将contentItem的opacity设置为1来禁用它。至少对我来说，这是可行的。

要说明您的定位:只需锚定它即可。

Flickable {
    id: myflickable
    ...
    ScrollBar.vertical: myvertscroll
    clip: true
}

ScrollBar {
    id: myvertscroll
    anchors.left: myflickable.right
    contentItem.opacity: 1
}

Answer 3

其他的解决方案对我都不起作用。所以我试着重写contentItem。此外，我必须添加一个恒定的宽度。

使用Qt 5.7和QtQuick.Controls 2.0进行了测试。

ListView {
    id: listView
    ...

    ScrollBar.vertical: ScrollBar {
        width: 10
        contentItem: Rectangle {
            color: "black"
        }
    }
}