ScrollView自动滚动以聚焦子组件QML

时间:2018-12-06 12:08:30

标签: qt qml

这是我对另一个问题的跟进,可以在本文中找到

When tab to another component position the correspondent scroll in QML

我想做的是,当我在不同的组件上使用Tab键时,我希望滚动条自动滚动到相同的组件,以便发生以下情况:

让我想在这里

enter image description here

现在我要做2个标签,然后转到

enter image description here

在此处应调整滚动以至少显示TextField完成。 像这样

enter image description here

这里的问题是我正在使用QtQuick.Controls 1.4来加载组件ScrollView 所以在那个例子中我得到了错误: Error: Cannot assign to non-existent property "contentY"import QtQuick.Controls 2.2配合使用效果很好。

我现在提供了一个简约的代码来显示与图像相同的图像:

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    height: 200
    width: 400
    ListModel {
        id: libraryModel
        ListElement {
            text: "A Masterpiece"
        }
        ListElement {
            text: "Brilliance"
        }
        ListElement {
            text: "Outstanding"
        }
    }

    Item {
        id: page
        anchors.fill: parent
        width:parent.width
        height: parent.height
        ScrollView {
            id:scrollView
            anchors.fill:parent
            style: ScrollViewStyle{
                handle: Rectangle {
                    implicitWidth: 30
                    color:  "black"
                }
                scrollToClickedPosition: true
                transientScrollBars:true
            }
            function scrollToY(y) {
                scrollView.contentItem.contentY = y;
            }
            Column{
                width:parent.width
                spacing:10
                TextField {
                    id:textField
                    implicitHeight: 30
                    font.bold: true
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                ComboBox {
                    id:comboBox
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                TextField {
                    id:textField2
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                ComboBox {
                    id:comboBox2
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                TextField {
                    id:textField3
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                ComboBox {
                    id:comboBox3
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                TextField {
                    id:textField4
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
                ComboBox {
                    id:comboBox4
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
                }
            }

        }
    }
}

1 个答案:

答案 0 :(得分:2)

我编辑了答案https://stackoverflow.com/a/53650089/6165833

对于QtQuick.Controls 1.4ScrollView的行为有所不同,您可以通过Flickable(现在对ScrollView.flickableItem只读)访问QtQuick.Controls 2.2

因此,您仍然可以使用flickableItem而不是contentItem来解决问题。

您将此功能添加到ScrollView(ID:scrollView)

// For QtQuick.Controls 1.4
function scrollToY(y) {
    scrollView.flickableItem.contentY = y;
}

然后您需要在每个项目获得焦点时调用它:

TextField {
    id:textField3
    anchors.topMargin: 10
    implicitHeight: 30
    font.bold: true
    onFocusChanged: if(focus) { scrollView.scrollToY(y); }
}