update

Author: zhengtianzuo

QmlTabBar/BaseTabBar.qml

@@ -11,38 +11,52 @@ import QtQuick.Layouts 1.0
 
 TabBar {
     property alias myModel: myModel
-
+    property int lastIndex: 0
 
     id: bar
-    height: 48
-    width: parent.width
     currentIndex: 0
 
     ListModel {
         id: myModel
-//        ListElement { modelText: "消息"; modelColor: "#000000"; modelColorG: "#148014"; modelSrc: "qrc:/Chat_MsgRecord.svg"; modelSrcG: "qrc:/Chat_MsgRecordG.svg";}
-//        ListElement { modelText: "联系人"; modelColor: "#000000"; modelColorG: "#148014"; modelSrc: "qrc:/Chat_FriendManager.svg"; modelSrcG: "qrc:/Chat_FriendManagerG.svg";}
-//        ListElement { modelText: "发现"; modelColor: "#000000"; modelColorG: "#148014"; modelSrc: "qrc:/Mobile_Find.svg"; modelSrcG: "qrc:/Mobile_FindG.svg";}
-//        ListElement { modelText: "我"; modelColor: "#000000"; modelColorG: "#148014"; modelSrc: "qrc:/Main_P2PChat.svg"; modelSrcG: "qrc:/Main_P2PChatG.svg";}
     }
 
     Repeater {
+        id: repeater
         model: myModel
 
         TabButton {
+            property alias imageSource: image.source
+            property alias textColor: text.color
+
             height: bar.height
             contentItem:Text{
+                id: text
                 text: modelText
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignBottom
                 color: (model.index === bar.currentIndex) ? modelColorG : modelColor
             }
             background:Image{
+                id: image
                 width: 24
                 height: 24
                 anchors.horizontalCenter: parent.horizontalCenter
                 source: (model.index === bar.currentIndex) ? modelSrcG : modelSrc
             }
+            onHoveredChanged: {
+                if (model.index !== bar.currentIndex){
+                    hovered ? text.color = modelColorG : text.color = modelColor
+                    hovered ? image.source = modelSrcG : image.source = modelSrc
+                }
+            }
+            onClicked: {
+                repeater.itemAt(bar.lastIndex).imageSource = myModel.get(bar.lastIndex).modelSrc;
+                repeater.itemAt(bar.lastIndex).textColor = modelColor;
+
+                image.source = modelSrcG;
+                text.color = modelColorG;
+                bar.lastIndex = model.index;
+            }
         }
     }
 }

QmlTabBar/Chat_FriendManager.svg renamed to QmlTabBar/images/Chat_FriendManager.svg

@@ -22,10 +22,10 @@ ApplicationWindow {
         height: 48
         width: parent.width
         Component.onCompleted: {
-            myModel.append({ "modelText": "消息", "modelColor": "#000000", "modelColorG": "#148014", "modelSrc": "qrc:/Chat_MsgRecord.svg", "modelSrcG": "qrc:/Chat_MsgRecordG.svg"})
-myModel.append({ modelText: "联系人"; modelColor: "#000000"; modelColorG: "#148014"; modelSrc: "qrc:/Chat_FriendManager.svg"; modelSrcG: "qrc:/Chat_FriendManagerG.svg";}
-//            ListElement { modelText: "发现"; modelColor: "#000000"; modelColorG: "#148014"; modelSrc: "qrc:/Mobile_Find.svg"; modelSrcG: "qrc:/Mobile_FindG.svg";}
-//            ListElement { modelText: "我"; modelColor: "#000000"; modelColorG: "#148014"; modelSrc: "qrc:/Main_P2PChat.svg"; modelSrcG: "qrc:/Main_P2PChatG.svg";}
+            myModel.append({ "modelText": "消息", "modelColor": "#000000", "modelColorG": "#148014", "modelSrc": "qrc:/images/Chat_MsgRecord.svg", "modelSrcG": "qrc:/images/Chat_MsgRecordG.svg"})
+            myModel.append({ "modelText": "联系人", "modelColor": "#000000", "modelColorG": "#148014", "modelSrc": "qrc:/images/Chat_FriendManager.svg", "modelSrcG": "qrc:/images/Chat_FriendManagerG.svg"})
+            myModel.append({ "modelText": "发现", "modelColor": "#000000", "modelColorG": "#148014", "modelSrc": "qrc:/images/Mobile_Find.svg", "modelSrcG": "qrc:/images/Mobile_FindG.svg"})
+            myModel.append({ "modelText": "我", "modelColor": "#000000", "modelColorG": "#148014", "modelSrc": "qrc:/images/Main_P2PChat.svg", "modelSrcG": "qrc:/images/Main_P2PChatG.svg"})
         }
     }
 

QmlTabBar/Chat_FriendManagerG.svg renamed to QmlTabBar/images/Chat_FriendManagerG.svg

@@ -1,14 +1,14 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>Chat_FriendManager.svg</file>
-        <file>Chat_MsgRecord.svg</file>
-        <file>Main_P2PChat.svg</file>
-        <file>Mobile_Find.svg</file>
-        <file>Chat_FriendManagerG.svg</file>
-        <file>Chat_MsgRecordG.svg</file>
-        <file>Main_P2PChatG.svg</file>
-        <file>Mobile_FindG.svg</file>
+        <file>images\Chat_FriendManager.svg</file>
+        <file>images\Chat_MsgRecord.svg</file>
+        <file>images\Main_P2PChat.svg</file>
+        <file>images\Mobile_Find.svg</file>
+        <file>images\Chat_FriendManagerG.svg</file>
+        <file>images\Chat_MsgRecordG.svg</file>
+        <file>images\Main_P2PChatG.svg</file>
+        <file>images\Mobile_FindG.svg</file>
         <file>BaseTabBar.qml</file>
     </qresource>
 </RCC>