6

我开始使用 QtQuick Controls 2.0。我有 C++ 的经验和少量的 Qt 经验，但我以前没有使用过 QML。

我有一个相互关联的 aTabBar和 a 。SwipeView我的意思是，当您在 上选择一个页面时TabBar，将SwipeView转到该页面。当您从 滑动到页面时SwipeView，TabBar更新本身会反映这一点。

作为学习练习，我决定创建一个按钮，将用户引导至第二页。问题是我似乎无法找到一种方法来做到这一点，而不会弄乱TabBar和之间的链接SwipeView。

以下代码是我想出的最好的。它正确地进入第二页，当我用静止更新更改当前页面TabBar时SwipeView。但是，滑动到新页面不再更新TabBar. 似乎设置tabBar.currentIndex为swipeView.currentIndex仅在使用冒号进行初始化时具有通过引用设置的效果。这样做是通过值设置等号。如何在保持不变的同时移动到特定页面swipeView.currentIndex == tabBar.currentIndex？

// main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page {
            Button {
                text: qsTr("Continue to Page 2")
                onClicked: {
                    tabBar.currentIndex = 1;
                    // this next line merely sets tabBar.currentIndex to 1
                    tabBar.currentIndex = swipeView.currentIndex
                }
                anchors.centerIn: parent
                width: text.implicitWidth
                height: text.implicitHeight
            }
        }

        Page {
            Label {
                text: qsTr("Second page")
                anchors.centerIn: parent
            }
        }
    }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex
        TabButton {
            text: qsTr("First")
        }
        TabButton {
            text: qsTr( "Second")
        }
    }
}

C++ 代码只是 Qt Creator 为我提供的默认代码：

// main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));

    return app.exec();
}
4

2 回答 2

8

为了在不破坏currentIndex绑定的情况下移动到下一页或上一页，您可以分别调用incrementCurrentIndex()或decrementCurrentIndex()。这些方法是在 Qt 5.8 的 Qt Quick Controls 2.1 中引入的。

鉴于currentIndex二传手又名。QQuickContainer::setCurrentIndex()是一个槽，你也可以setCurrentIndex()从QML调用跳转到任意页面。这也不会破坏现有的绑定。

Button {
    onClicked: tabBar.setCurrentIndex(1)
}
于 2017-04-24T04:37:57.037 回答
2

您可能正在寻找Signals。来自 Qt 文档：

属性更改信号处理程序

当 QML 属性的值发生变化时，会自动发出信号。这种类型的信号是属性更改信号，这些信号的信号处理程序以on<Property>Changed的​​形式编写， 其中<Property>是属性的名称，第一个字母大写。

因此，对于您的示例：

SwipeView {
    id: swipeView
    ...
    currentIndex: tabBar.currentIndex
    onCurrentIndexChanged: {
        tabBar.currentIndex = currentIndex
    }
...
footer: TabBar {
    id: tabBar
    currentIndex: swipeView.currentIndex
    onCurrentIndexChanged: {
        swipeView.currentIndex = currentIndex
    }
    ...

这样，您可以简单地设置任何一个的 currentIndex 并放心，由于信号处理程序，它们将保持“链接”。

编辑：

正如 jpnurmi 所指出的，您也可以Qt.binding像这样使用：

onClicked: {
    swipeView.currentIndex = 1;
    swipeView.currentIndex = Qt.binding(function() {return tabBar.currentIndex})
}

这将在分配静态值后恢复绑定。

于 2017-04-24T00:27:30.030 回答