☰

如何从 PageStack 的页面返回到 UI Toolkit 中的父选项卡

tag-icon • tag-icon application-development qt ubuntu-sdk qml pagestack
如何从 PageStack 的页面返回到 UI Toolkit 中的父选项卡

所以在之前的一个问题中我尝试使用 Ubuntu UI Toolkit 在 Tabs 组件中嵌套 PageStack。这个方法似乎可行，但也有自己的缺点，所以我现在尝试另一种方法，理论上应该能达到同样的效果根据文件。

但是，使用下面的代码时，我注意到了以下情况：打开第 3 页后，如果我拉出工具栏并点击“后退”按钮，它总是返回到选项卡中的初始选项卡，而不是页面加载时的实际选项卡。

也就是说，page3是从 加载的tab2，但如果我打开页面，从底部拉出工具栏并点击“返回”，我就会返回到tab1。

我怎样才能使点击“返回”按钮返回到tab2？

import QtQuick 2.0
import Ubuntu.Components 1.1

MainView {
    id: mainView
    width: units.gu(38)
    height: units.gu(50)

    PageStack {
        id: pageStack
        Component.onCompleted: push(tabs)

        Tabs {
            id: tabs
            Tab {
                id: tab1
                title: "Tab 1"
                page: Page {
                    Label {
                        anchors.centerIn: parent
                        text: "Use header to navigate between tabs"
                    }
                }
            }
            Tab {
                id: tab2
                title: "Tab 2"
                page: Page {
                    Button {
                        anchors.centerIn: parent
                        onClicked: pageStack.push(page3)
                        text: "Press"
                    }
                }
            }
        }
        Page {
            id: page3
            visible: false
            title: "Page on stack"
            Label {
                anchors.centerIn: parent
                text: "Press back to return to the tabs"
            }
        }
    }
}

答案1

这是由于 UI Toolkit 中最近出现的一个错误造成的：https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1316736

一旦修复了这个问题，当你返回到 PageStack 的 Tabs 页面时，它将再次返回到之前选择的选项卡。

答案2

实现此目的的方法是在工具栏中定义一个自定义后退按钮，并将其分配给page3的tools属性。这样，我就可以复制标准后退按钮的功能，即返回 PageStack 的根目录，然后选择要返回的选项卡。

ToolbarItems {

    back: ToolbarButton {
        action: Action {
            text: i18n.tr("Back")
            iconName: "back"
            onTriggered: {
                pageStack.pop();
                // It'd be neater to use `selectedTab`, but it's read-only
                tabs.selectedTabIndex = 1;
            }
        }
    }

    // [...]
}

相关内容