Полосы прокрутки в QML

Question

Sept. 12, 2018, 9:32 p.m.

Полосы прокрутки в QML

Добрый день!

Есть такой элемент MainArea.qml:

import QtQuick 2.0
import QtQuick.Controls 1.4

Item {
    anchors.fill: parent

        Rectangle {
            id: mainRect
            x: 0
            y: 50
            height: parent.height - y
            width: parent.width
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "transparent"
                }
                GradientStop {
                    position: 0.2
                    color: Qt.darker("blue", 4.0)
                }
                GradientStop {
                    position: 0.8
                    color: Qt.darker("blue", 4.0)
                }
                GradientStop {
                    position: 1.00
                    color: "transparent"
                }
            }
        }

        Rectangle {
            id: rect
            x: 0
            y: mainRect.x + mainRect.height + 50
            height: 300
            width: parent.width
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "transparent"
                }
                GradientStop {
                    position: 0.2
                    color: Qt.darker("blue", 4.0)
                }
                GradientStop {
                    position: 0.8
                    color: Qt.darker("blue", 4.0)
                }
                GradientStop {
                    position: 1.00
                    color: "transparent"
                }
            }
        }
}

Он будет вставляться в главное окно:

Loader {
        id: clientLoader
        anchors.left: header.left
        anchors.top: menu.bottom
        width: header.width
        height: footer.y - y
        source: Qt.resolvedUrl("qrc:/MainArea.qml")
    }

Подскажите как можно организовать в MainArea.qml полосы прокрутки, чтобы можно было просматривать все содержимое?

Какой компонент для этого использовать?

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Subscribe to the discussion2

Section subscription99

Do you like it? Share on social networks!

1.3K

2

0

Sept. 13, 2018, 2:22 a.m.
(edited)
The answer was marked as a solution.

Добрый день!

Для этого можно использовать QML тип Flickable, а также типы ScrollBar

Вот пример

main.qml

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flickable {
        width: 200
        height: 200
        clip: true
        contentWidth: clientLoader.width;
        contentHeight: clientLoader.height
        ScrollBar.vertical: ScrollBar { }
        ScrollBar.horizontal: ScrollBar { }

        Loader {
                id: clientLoader
                clip: true
                source: Qt.resolvedUrl("qrc:/MainArea.qml")
            }
    }
}

MainArea.qml

import QtQuick 2.0
import QtQuick.Controls 1.4

Item {
    height: 800
    width: 800

        Rectangle {
            id: mainRect
            x: 0
            y: 50
            height: parent.height - y
            width: parent.width
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "transparent"
                }
                GradientStop {
                    position: 0.2
                    color: Qt.darker("blue", 4.0)
                }
                GradientStop {
                    position: 0.8
                    color: Qt.darker("blue", 4.0)
                }
                GradientStop {
                    position: 1.00
                    color: "transparent"
                }
            }
        }

        Rectangle {
            id: rect
            x: 0
            y: mainRect.x + mainRect.height + 50
            height: 300
            width: parent.width
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "transparent"
                }
                GradientStop {
                    position: 0.2
                    color: Qt.darker("blue", 4.0)
                }
                GradientStop {
                    position: 0.8
                    color: Qt.darker("blue", 4.0)
                }
                GradientStop {
                    position: 1.00
                    color: "transparent"
                }
            }
        }
}

0

Sept. 13, 2018, 4:46 p.m.

Спасибо! Работает.

0

Comments

Only authorized users can post comments.
Please, Log in or Sign up

Полосы прокрутки в QML

We recommend hosting TIMEWEB

Comments

Actions