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 = "";
}
}
MainWindow.qml如下所示:
import QtQuick 2.12
import QtGraphicalEffects 1.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import Qt.Singleton 1.0
import "qrc:/common"
import "qrc:/bar"
Rectangle {
id: container
signal closeRequest();
signal returnRequest();
gradient: SkinSingleton.skins[XmlCfg.skinIndex]
RowLayout {
anchors.fill: parent
spacing: 0
MenuBar {
Layout.preferredWidth: 60
Layout.fillHeight: true
onReturnRequest: container.returnRequest();
}
Rectangle {
color: Qt.rgba(1,1,1, 0.5 + XmlCfg.skinOpacity * 0.3 )
Layout.preferredWidth: 200
Layout.fillHeight: true
}
Rectangle {
id: rct
color: Qt.rgba(1,1,1,0.5 + XmlCfg.skinOpacity * 0.5)
Layout.fillWidth: true
Layout.fillHeight: true
Row {
anchors.right: rct.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 {
}
}
未完待續~
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/289032.html
標籤：其他