QtQuick.Controls2.0 Header、Footer:Tabbar

TabBar+header and footer 是Qt5.7的新组建,5.7提供了大量实用美观的组件Material和Universal 风格已经正式发布,在5.6中是试验版本。ApplicationWindow中提供了导航,类似于网页设计中的页头和页脚,Qtquick中 叫做 header和footer,这两个定义了固定在页面顶部的元素和底部的元素。currentIndex属性:当前Tabbar所选中的项,Tabbar中一般用新元素:TabButton来定义显示的按钮

写一段简单的代码,顶部导航和底部导航的curindex同步

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
ApplicationWindow {
    id:root
    visible: true;
    height: 480;
    width: 320;

    header: TabBar {
                id: headertabBar;
                currentIndex:footertabBar.currentIndex
                TabButton {

                    text: qsTr("header Tab1");
                }
                TabButton {
                    text: qsTr("header Tab2")
                }
                TabButton {
                    text: qsTr("header Tab3")
                }
            }


    footer: TabBar {
        id: footertabBar
        currentIndex: headertabBar.currentIndex
        TabButton {

            text: qsTr("footer Tab1");
        }
        TabButton {
            text: qsTr("footer Tab2")
        }
        TabButton {
            text: qsTr("footer Tab3")
        }
    }
}