第QT實(shí)現(xiàn)QML側(cè)邊導(dǎo)航欄的最簡(jiǎn)方法目錄TabBar屬性列表示例代碼側(cè)邊導(dǎo)航欄修改代碼總結(jié)

TabBar

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

屬性列表

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

屬性類(lèi)型描述contentHeightreal此屬性保存內(nèi)容高度。它用于計(jì)算選項(xiàng)卡欄的隱式總高度。contentWidthreal此屬性保存內(nèi)容寬度。它用于計(jì)算選項(xiàng)卡欄的隱式總寬度。positionenumeration此屬性保存選項(xiàng)卡欄的位置。

TabBar.HeaderTabBar.Footer

附加屬性類(lèi)型描述indexint這個(gè)附加屬性保存TabBar中每個(gè)選項(xiàng)卡按鈕的索引。它被附加到TabBar的每個(gè)選項(xiàng)卡按鈕上。positionenumeration這個(gè)附加屬性保存選項(xiàng)卡欄的位置。它被附加到TabBar的每個(gè)選項(xiàng)卡按鈕上。

TabBar.HeaderTabBar.FootertabBarTabBar此附加屬性保存管理此選項(xiàng)卡按鈕的選項(xiàng)卡欄。它被附加到TabBar的每個(gè)選項(xiàng)卡按鈕上。

示例代碼

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中添加三個(gè)TabButton，點(diǎn)擊TabButton可以實(shí)現(xiàn)對(duì)StackLayout中相應(yīng)的Item的切換。

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

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

修改代碼

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

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

以上就是實(shí)現(xiàn)