查看完整版本: [-- zhengtianzuo系列-Qml底部导航 --]

QTCN开发网 -> Qt代码秀 -> zhengtianzuo系列-Qml底部导航 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

zhengtianzuo 2017-10-19 17:00

zhengtianzuo系列-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
                }
            }
        }
    }
```



需要完整代码请访问 QtQuickExamples

lsyzsl 2017-10-25 08:16
佩服你的精神!一定要好好研究你发的每一个帖子。

zhengtianzuo 2017-10-25 08:55
lsyzsl:[表情] 佩服你的精神!一定要好好研究你发的每一个帖子。 (2017-10-25 08:16) 

谢谢 我还在继续~


查看完整版本: [-- zhengtianzuo系列-Qml底部导航 --] [-- top --]



Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled