qt - 当选项卡到另一个组件位置时，QML 中相应的滚动

Question

我想要做的是，如果我从 TextField 切换到另一个组件(ComboBox wtv)，我希望滚动能够适应这一点。

当我认为这非常重要时，当我执行连续选项卡时，我会转到 ScrollView 显示的控件下方。

举个例子，假设我在这里

现在我做了 2 个选项卡，然后转到

这里应该调整滚动以至少显示 TextField 完整。像这样

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

import QtQuick 2.9
import QtQuick.Controls 2.2

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 {
            anchors.fill:parent
            width:parent.width
            height: parent.height
            Column{
                width:parent.width
                spacing:10
                TextField {
                    id:textField
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField2
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox2
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField3
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox3
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField4
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox4
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
            }
        }
    }
}

Answer 1

我看到的唯一方法是手动滚动到获得焦点的项目。

您可以将此函数添加到您的 ScrollView 中(使用 id:scrollView)

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

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

通过传递元素的 y，您会将视口(viewport)滚动到元素的顶部。对于不同的行为，您需要从 y 计算您需要的任何 y 位置。