Qml底部导航

来源：互联网发布：java graphics 方法编辑：程序博客网时间：2024/05/19 23:59

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                }            }        }    }

这里写图片描述

需要完整代码请访问QtQuickExamples

阅读全文

0 0