1.版本介绍(已上传至群里)
版本说明:
添加登录界面、
UDP校验登录、
皮肤更换、
3D旋转（主界面和登录界面之间切换） 、
效果图如下所示:
如果效果图加载失败,可以去哔哩哔哩 https://www.bilibili.com/video/BV1ow411R7Dg浏览
项目文件结构如下所示:
下个版本实现:
添加获取好友列表及头像、
好友聊天和表情包收发、
文件收发、
2.核心代码
Login.qml如下所示:
import QtQuick 2.0 import QtGraphicalEffects 1.12 import QtQuick.Controls 2.5 import QtQuick.Layouts 1.12 import Qt.Singleton 1.0 import "qrc:/common" Rectangle { id: container color: "#F5F5F5" signal closeRequest(); signal loginRequest(); SelectFileDialog { id: _file nameFilters: ["image files (*.png *.jpg)"] folder: XmlCfg.fileOpenUrl onAccepted: { console.log("选择了: "+files[0]) if (!XmlCfg.updateHeadImage(files[0])) { popup.hint = "图片格式读取失败!" popup.open(); } else { } } } Row { anchors.right: container.right ImageButton { imageSrc: "qrc:/res/minimize.png" backHoverColor: "#E3E3E3" ToolTip.delay: 1000 // 徘徊在按钮上超过500ms则显示,则默认为直接显示 ToolTip.visible: hovered // 当鼠标徘徊在按钮上时,则显示ToolTip ToolTip.text: qsTr("最小化") onClicked: { showMinimized() } } ImageButton { imageSrc: "qrc:/res/close.png" hoverimageSrc:"qrc:/res/close_hover.png" backHoverColor: "#FA5151" ToolTip.delay: 1000 // 徘徊在按钮上超过500ms则显示,则默认为直接显示 ToolTip.visible: hovered // 当鼠标徘徊在按钮上时,则显示ToolTip ToolTip.text: qsTr("关闭") onClicked: closeRequest(); } } layer.enabled: true layer.effect: DropShadow { } YaheiText { text: "微信" font.pixelSize: 15 x: 10 y: 6 color: "#8E8E8E" } ColumnLayout { id: _center spacing: 20 anchors.centerIn: parent opacity: 0.0 HeadImage { id: _head radius: 8 width : 100 height : 100 headUrl: XmlCfg.headImage Layout.alignment: Qt.AlignCenter Button { id: _headBtn anchors.fill: parent contentItem: Rectangle { color: "transparent" } background: Rectangle { id: _headBtnBack color: "transparent" border.width: 2 border.color: _headBtn.hovered||_loginAnimation.running ? SkinSingleton.skins[XmlCfg.skinIndex].loginColor : "transparent" radius: _head.radius } onClicked: { _file.open(); } } } TextField { id: _name placeholderText : "请输入你的昵称" text: XmlCfg.currentUser font.family: "Microsoft Yahei" font.pixelSize: 20 horizontalAlignment: TextField.AlignHCenter color: "#666" selectedTextColor: "#fff" background: Rectangle { border.width: 0 color: "transparent" } Layout.fillWidth: false Layout.alignment: Qt.AlignCenter Layout.preferredWidth: 200 onTextChanged: { XmlCfg.currentUser = _name.text; } } BaseButton { id: _login btnText: "登录" Layout.fillWidth: true Layout.alignment: Qt.AlignCenter bckcolor: SkinSingleton.skins[XmlCfg.skinIndex].loginColor onClicked: { _loginAnimation.restart(); XmlCfg.SkinIndex = "2"; Udp.login(); } } YaheiText { id: _loginHint Layout.alignment: Qt.AlignCenter text: "" font.pixelSize: 15 color: SkinSingleton.skins[XmlCfg.skinIndex].loginColor } } YaheiText { anchors.horizontalCenter: container.horizontalCenter anchors.bottom: container.bottom anchors.bottomMargin: 10 text: "提示: 用户名必须唯一*" font.pixelSize: 13 color: "#8E8E8E" } HintPopup { id: popup width : 180 height: 120 anchors.centerIn: container hint: "用户名已被注册!" } SequentialAnimation { running: true NumberAnimation { target: container; properties: "scale"; from: 0.3; to: 1.0; easing.type: Easing.InOutQuad; duration: 200 } NumberAnimation { target: _center; properties: "opacity"; from: 0; to: 1.0; easing.type: Easing.InOutQuad; duration: 300 } } SequentialAnimation { id: _loginAnimation SequentialAnimation { loops: 4 ScriptAction { script: _loginHint.text = "登录中." } NumberAnimation { target: _headBtnBack; property: "opacity"; from: 1.0; to: 0.0; duration: 200 } ScriptAction { script: _loginHint.text = "登录中.." } NumberAnimation { target: _headBtnBack; property: "opacity"; from: 0.0; to: 1.0; duration: 200 } ScriptAction { script: { _loginHint.text = "登录中..." } } PauseAnimation { duration: 100 } } ScriptAction { script: { _loginHint.text = "登录成功!" } } PauseAnimation { duration: 1000 } } Connections { target: Udp; onLoginResult:{ if (result) { _loginAnimation.stop(); _loginHint.text = "用户名已被注册!" popup.hint = "用户名已被注册!" popup.open(); } } } Connections { target: _loginAnimation; onFinished:{ console.log(" OK "); loginRequest(); } } function initialize() { _loginHint.text = ""; } }