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

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

然后为页面添加导航栏

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

/*TestPage.qml*/
import QtQuick 1.1
import com.nokia.meego 1.0
PageStack {
    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();
                    }
                }
            }
    }
}

效果图就补贴上来了。