footer加上TabBar即可实现底部导航
footer: TabBar {
id: bar
height: 48
width: parent.width
currentIndex: 0
ListModel {
id: myModel
ListElement { modelText: "消息"; modelSrc: "qrc:/Chat_MsgRecord.svg"; modelSrcG: "qrc:/Chat_MsgRecordG.svg";}
ListElement { modelText: "联系人"; modelSrc: "qrc:/Chat_FriendManager.svg"; modelSrcG: "qrc:/Chat_FriendManagerG.svg";}
ListElement { modelText: "发现"; modelSrc: "qrc:/Mobile_Find.svg"; modelSrcG: "qrc:/Mobile_FindG.svg";}
ListElement { modelText: "我"; modelSrc: "qrc:/Main_P2PChat.svg"; modelSrcG: "qrc:/Main_P2PChatG.svg";}
}
Repeater {
model: myModel
TabButton {
height: bar.height
contentItem:Text{
text: modelText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignBottom
color: (model.index === bar.currentIndex) ? "#148014" : "#000000"
}
background:Image{
width: 24
height: 24
anchors.horizontalCenter: parent.horizontalCenter
source: (model.index === bar.currentIndex) ? modelSrcG : modelSrc
}
}
}
}
show.gif
需要完整代码请访问QtQuickExamples
