在實際開發(fā)中導(dǎo)航欄是必不可少的控件，QtQuick Controls控件中可以使用TabBar來做導(dǎo)航欄，原始的導(dǎo)航欄是橫向的，查找了其屬性后發(fā)現(xiàn)無法直接設(shè)置為縱向的。本節(jié)將給小伙伴們介紹一種非常簡單的實現(xiàn)實現(xiàn)QML側(cè)邊導(dǎo)航欄的最簡方法。原始導(dǎo)航欄如下圖：

屬性列表

允許用戶在不同的視圖或子任務(wù)之間切換。標(biāo)簽欄提供了一個基于標(biāo)簽的導(dǎo)航模型。TabBar由TabButton控件填充，可以與任何提供currentIndex -屬性的布局或容器控件一起使用，如StackLayout或SwipeView。

屬性	類型	描述
contentHeight	real	此屬性保存內(nèi)容高度。它用于計算選項卡欄的隱式總高度。
contentWidth	real	此屬性保存內(nèi)容寬度。它用于計算選項卡欄的隱式總寬度。
position	enumeration	此屬性保存選項卡欄的位置。 TabBar.HeaderTabBar.Footer

附加屬性	類型	描述
index	int	這個附加屬性保存TabBar中每個選項卡按鈕的索引。它被附加到TabBar的每個選項卡按鈕上。
position	enumeration	這個附加屬性保存選項卡欄的位置。它被附加到TabBar的每個選項卡按鈕上。 TabBar.HeaderTabBar.Footer
tabBar	TabBar	此附加屬性保存管理此選項卡按鈕的選項卡欄。它被附加到TabBar的每個選項卡按鈕上。

示例代碼

    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("Home")
        }
        TabButton {
            text: qsTr("Discover")
        }
        TabButton {
            text: qsTr("Activity")
        }
    }

    StackLayout {
        width: parent.width
        currentIndex: bar.currentIndex
        Item {
            id: homeTab
        }
        Item {
            id: discoverTab
        }
        Item {
            id: activityTab
        }
    }

在TabBar中添加三個TabButton，點擊TabButton可以實現(xiàn)對StackLayout中相應(yīng)的Item的切換。

側(cè)邊導(dǎo)航欄

從position屬性中可以看出，TabBar只能直接設(shè)置為頂部和底部，無法直接應(yīng)用成側(cè)邊導(dǎo)航欄。此時，需要將 TabBar和TabButton的大小和位置進行調(diào)整，即可實現(xiàn)側(cè)邊導(dǎo)航欄。

修改代碼

TabBar寬度影響自身和內(nèi)部包含的TabButton的寬度。橫向排列時，TabBar的寬度等于三個TabButton的寬度；縱向排列時，TabBar的寬度等于一個TabButton的寬度。

其次需要改變TabButton的寬度，高度以及排列的位置。橫向排列時，TabButton的寬度大于高度；縱向排列時，為了美觀，使TabButton的寬度小于高度。將所有TabButton都設(shè)置為首位相連，即第一個TabButton的bottom底部就是第二個TabButton的頂部。

    TabBar {
        id: bar
        width: firstBtn.width
        TabButton {
            id: firstBtn
            text: qsTr("Home")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
        }
        TabButton {
            id: secondBtn
            text: qsTr("Discover")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: firstBtn.bottom
        }
        TabButton {
            id: thirdBtn
            text: qsTr("Activity")
            width: root.width/8
            height: root.height/3
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: secondBtn.bottom
        }
    }

總結(jié)

以上就是實現(xiàn)實現(xiàn)QML側(cè)邊導(dǎo)航欄的最簡方法，除此之外還可以自定義繪制導(dǎo)航欄控件，不過比起本節(jié)介紹的方法較為復(fù)雜，不如這種方法來得快捷。更多相關(guān)QT QML側(cè)邊導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: