Question

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

When tab to another component position the correspondent scroll in QML

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

让我想在这里

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

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

这里的问题是我正在使用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); }
                }
            }

        }
    }
}

Answer 1

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

对于QtQuick.Controls 1.4，ScrollView的行为有所不同，您可以通过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); }
}

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

1 个答案: