在N9使用TabGround进行页面导航（02）

来源：互联网发布：excel03显示重复数据编辑：程序博客网时间：2024/06/02 01:00

查看文章在N9使用TabGround进行页面导航（01）

然后为页面添加导航栏

具体代码是添加一个ToolBar，让后定位大片parent的bottom

/*TestPage.qml*/import QtQuick 1.1import com.nokia.meego 1.0PageStack {    ToolBar {        id: topToolBar        anchors {            left: parent.left;            right: parent.right;            top: parent.top        }        tools: ToolBarLayout {            id: tabBarLayout            anchors {                left: parent.left;                right: parent.right;            }            ButtonRow {                TabButton { tab: tab1; text: qsTr("Tab 1") }                TabButton { tab: tab2; text: qsTr("Tab 2") }                TabButton { tab: tab3; text: qsTr("Tab 3") }            }        }    }    TabGroup {        id: tabGroup        currentTab: tab1        anchors.top: topToolBar.bottom        Page {            id: tab1            Text {                text: "This is a single page1"            }        }        Page {            id: tab2            Text {                text: "This is a single page2"            }        }        Page {            id: tab3            Text {                text: "This is a single page3"            }        }    } ToolBar {        id: bottomToolBar        anchors {            left: parent.left;            right: parent.right;            bottom: parent.bottom        }        tools:ToolBarLayout {                id: commonTools                ToolIcon { iconId: "toolbar-back"; onClicked: { myMenu.close(); Qt.quit(); } }                ToolIcon { iconId: "toolbar-view-menu";                    onClicked: (myMenu.status === DialogStatus.Closed) ? myMenu.open() : myMenu.close()                }            }            Menu {                id:myMenu                MenuItem {                    text:qsTr("something")                    onClicked: {                        myMenu.close();                    }                }            }    }}

效果图就补贴上来了。

1 0