目錄

• 1 主界面
• 2 創建登錄面板qml文件
• 3 補充
• ?結語?

1 主界面

大概長成這樣

2 創建登錄面板qml文件

新建一個qml文件命名為LoginPanel.qml,首先先把右上角兩個圓圈搓出來，一個是縮小，一個是關閉。

main.qml中，定義一下id并調用LoginPanel，主窗口的顏色設置為透明，我想在LoginPanel設置背景顏色以及窗口形狀

Window {id:main_Windowvisible: truewidth: 400height: 460title: qsTr("Chat")color: "transparent"flags: Qt.Window | Qt.FramelessWindowHintLoginPanel{} }

禁用原生態的窗口

flags: Qt.Window | Qt.FramelessWindowHint

接下來是LoginPanel.qml中登錄界面的操作：
某些屬性為了方便快捷設置，我在頂部進行了聲明

property var fontSize: 20//字體大小property var iconSize: 20//圖標大小property var logoSize: 30//logo大小property var funcBtnSize: 15//功能按鈕大小property var photoImageSize: 90//頭像大小property var inputL_and_RSpacing: 30//輸入左右間隔距離

先來設置背景，同樣創建個矩形框，這里我設置了邊框以及邊角的弧度，由于白色有點過于晃眼睛，所以這里我設置成了淺灰色

//背景Rectangle{id:rect_bganchors.fill: parentcolor: "#d7dcdc"border.color: "black"border.width: 1radius: 10}

去除邊框后，需要設置鼠標按下拖動整個窗口，原理就是記錄鼠標按下后的坐標，然后拖動的時候，用窗口的坐標（左上角為原點）+鼠標移動后的坐標-鼠標按下時的坐標

//鼠標按下拖拽窗口移動MouseArea{anchors.fill: parentacceptedButtons: Qt.LeftButton//只檢測鼠標左鍵property var _X: 0property var _Y: 0onPressed: {_X = mouseX_Y = mouseY}onPositionChanged: {main_Window.x += mouseX - _Xmain_Window.y += mouseY - _Y}}

左上角的logo，記得要設置下圖片的大小，否則看起來鋸齒會比較明顯sourceSize

//左上角圖標Image{id:image_Iconwidth: root.logoSizeheight: root.logoSizeanchors{left: parent.leftleftMargin: 10top: parent.toptopMargin: 10}source: "Images/FX.png"sourceSize: Qt.size(width,height)}

右上角的兩個圓點，第一個是縮小按鈕，第二個是關閉按鈕

//右上角功能按鈕Row{anchors.right: parent.rightanchors.rightMargin: 10anchors.top: parent.topanchors.topMargin: 10spacing: 10Rectangle{//縮小width: root.funcBtnSizeheight: root.funcBtnSizeradius: width / 2color: "#f5b57f"MouseArea{anchors.fill: parentonClicked: main_Window.showMinimized()}}Rectangle{//關閉width: root.funcBtnSizeheight: root.funcBtnSizeradius: width / 2color: "#ee8a8a"MouseArea{anchors.fill: parentonClicked: Qt.quit()}}}

頭像我暫時沒去找好看的圖片，這里直接用虛線框代替

Rectangle{id:photoImagewidth: root.photoImageSizeheight: root.photoImageSizeradius: width / 2color: "black"anchors.horizontalCenter: parent.horizontalCenteranchors.top: parent.topanchors.topMargin: 50Image {source: "Images/頭像.png"anchors.fill: parentsourceSize: Qt.size(width,height)}}

賬號、密碼的輸入區域，這里的賬號我限制了長度一個int的大小，密碼設置為輸入時用黑心圓圈代替，文本輸入我還加上了焦點以及Tab切換

//密碼、賬號Column{anchors.horizontalCenter: parent.horizontalCenteranchors.top: photoImage.bottomanchors.topMargin: 50spacing: 60//賬號輸入區域Rectangle{id:rect_ID_BGwidth: root.width * 0.6height: 35color: "transparent"Rectangle{width: root.width * 0.6height: 1color: "black"anchors{bottom: parent.bottom}Image {id:image_IDwidth: root.iconSizeheight: root.iconSizesourceSize: Qt.size(root.iconSize,root.iconSize)source: "Images/賬號圖標.png"opacity: 0.5anchors{bottom: parent.bottombottomMargin: 5}}//賬號輸入TextInput{id:textIn_IDanchors{left: parent.leftleftMargin: root.inputL_and_RSpacingright: parent.rightrightMargin: root.inputL_and_RSpacingbottom: image_ID.bottom}font{pixelSize: root.fontSizebold: true}validator: IntValidator{bottom: 1;top: 2147483647}clip: truefocus: trueKeyNavigation.tab: textIn_PassWordselectByMouse: true}}}//密碼輸入區域Rectangle{id:rect_PassWord_BGwidth: root.width * 0.6height: 35color: "transparent"Rectangle{width: root.width * 0.6height: 1color: "black"anchors{bottom: parent.bottom}Image {id:image_PassWordwidth: root.iconSizeheight: root.iconSizesourceSize: Qt.size(root.iconSize,root.iconSize)source: "Images/密碼圖標.png"opacity: 0.5anchors{bottom: parent.bottombottomMargin: 5}}//密碼輸入TextInput{id:textIn_PassWordanchors{left: parent.leftleftMargin: root.inputL_and_RSpacingright: parent.rightrightMargin: root.inputL_and_RSpacingbottom: image_PassWord.bottom}font{pixelSize: root.fontSizebold: true}echoMode:TextInput.Passwordclip: truefocus: trueKeyNavigation.tab: textIn_IDselectByMouse: true}}}}

最后是登錄按鈕

//登錄按鈕Rectangle{id:rect_LoginBtnwidth: parent.width * 0.3height: parent.height * 0.1radius: 10border{width: 1color: "black"}anchors{horizontalCenter: parent.horizontalCenterbottom: parent.bottombottomMargin: 20}Text {id: text_Logintext: qsTr("登 錄")font{pixelSize: 18bold: true}anchors.centerIn: parent}MouseArea{anchors.fill: parentonClicked: {}}}

整體下來就是長這樣子，一個比較簡單的界面搭建，沒有太出眾的美術天賦，只能說具備了基本的界面

3 補充

昨天搞忘了記住密碼、忘記密碼、注冊賬號這三個文本🐷，今天補上
記住密碼

//記住密碼Rectangle{id:rect_RTPwidth: 20height: 20radius: 5color: "transparent"border.color: "black"border.width: 1opacity: 0.5anchors{left: col_input.lefttop:col_input.bottomtopMargin: 5}property bool bPitchOn: falseRectangle{id:rect_okvisible: rect_RTP.bPitchOnwidth: parent.width * 0.7height: parent.height * 0.7anchors.centerIn: parentradius: 5color: "green"}MouseArea{anchors.fill: parentonClicked: {if(false === rect_RTP.bPitchOn){rect_ok.visible = truerect_RTP.bPitchOn = true}else{rect_ok.visible = falserect_RTP.bPitchOn = false}}}}Text {id: text_RTPtext: qsTr("記住密碼")opacity: 0.5font{bold:truepixelSize: root.fontSize - 4}anchors{left: rect_RTP.rightleftMargin: 5verticalCenter: rect_RTP.verticalCenter}}

忘記密碼

//忘記密碼Text {id: text_ForgetPassWordtext: qsTr("忘記密碼")opacity: 0.5font{bold:truepixelSize: root.fontSize - 4}anchors{right: col_input.rightverticalCenter: rect_RTP.verticalCenter}MouseArea{anchors.fill: parentonClicked: {}}}

注冊賬號

//注冊賬號Text {id: text_RegisterAnAccounttext: qsTr("注冊賬號")opacity: 0.5font{bold:truepixelSize: root.fontSize - 4}anchors{left: parent.leftleftMargin: 10bottom: parent.bottombottomMargin: 10}MouseArea{anchors.fill: parentonClicked: {}}}

界面展示：

?結語?

由于界面沒有太復雜的連帶邏輯，所以只算是完成了可視化界面的搭建，注冊界面、賬號密碼的存儲等功能就下期再說吧，(●ˇ?ˇ●)

總結

以上是生活随笔為你收集整理的【Qt Quick聊天软件练习】二、登录界面搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。