ScrollView自動滾動以聚焦子組件QML

Question

這是我有另一個問題的跟進，可以在這篇文章中找到

當跳到另一個組件位置時，相應的滾動在QML中

我想要做的是，當我在不同組件上使用Tab鍵時，我希望滾動條自動滾動到該相同組件，以便發生以下情況：

假設我在這里

現在我做2個標簽，然后轉到

在這里它應該調整滾動以至少顯示該TextField完成。 像這樣

這里的問題是我正在使用QtQuick.Controls 1.4加載組件ScrollView因此在該示例中出現錯誤： Error: Cannot assign to non-existent property "contentY"通過import QtQuick.Controls 2.2 Error: Cannot assign to non-existent property "contentY" ，它工作良好。

我現在提供一個簡約的代碼來顯示與圖像相同的代碼：

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

        }
    }
}

Answer 1

我編輯了答案https://stackoverflow.com/a/53650089/6165833

對於QtQuick.Controls 1.4 ， ScrollView行為有所不同，您可以通過ScrollView.flickableItem （現在對QtQuick.Controls 2.2只讀）訪問Flickable 。

因此，您仍然可以通過使用flickableItem而不是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); }
}