How to make scrollbar always visible on Flckable in QML

Question

I would like to make Scrollbar.vertical in Flickable area is always visible. currently it is visible upon clicking. Also the text area is overlapping with scroll bar. How can i sepearate scrollbar with text area in the following qml code

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
    }
}

You can easily create a "standalone" item and control it by binding to the flickable's properties instead of using the default built in behavior. — dtech, Feb 12 '17 at 20:20
@ddriver: that's an easy solution. but i am trying to use the default one effectively — Bupa, Feb 13 '17 at 05:06
You can try to set `active:true`. According to the documentation, it's true when the scrollbar is visible. It's used e.g. to [make scrollbars visibility dependent on the each other](http://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#binding-the-active-state-of-horizontal-and-vertical-scroll-bars). — BaCaRoZzo, Feb 13 '17 at 07:21

derke · Answer 1 · 2017-06-01T16:01:48.320

13

If upgrading to Qt 5.9, QtQuick.Controls 2.2 introduces a policy property that can help e.g.

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
    }
}

edited Jun 01 '17 at 16:01

answered Jun 01 '17 at 15:53

derke

469
4
6

derM - not here for BOT dreams · Answer 2 · 2017-02-13T11:46:28.680

It seems the active-property suggested by BaCaRoZzo is overwritten by a timer every few seconds, if it is just set to true. So you might use the onActiveChanged-signal to reset it to true each time.

However you can also disable it by setting the opacity of the contentItem to 1. At least for me, that does the trick.

To adress your positioning: Just anchor it.

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

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

score 0 · Answer 3 · answered Nov 09 '18 at 07:44

The other solutions did not work for me. So I tried to overwrote the contentItem. Additionally I had to add a constant width.

Tested with Qt 5.7 and QtQuick.Controls 2.0.

ListView {
    id: listView
    ...

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

How to make scrollbar always visible on Flckable in QML

3 Answers3

Linked