Qml底部导航

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