贵州软件开发 网站开发,wordpress videotheme,国内ui设计网站,重庆宣网站建设最近在学习QT#xff0c;也初探到qml 做ui 的灵活性与强大#xff0c;于是手痒痒#xff0c;做个demo 记录下学习成果
主要内容是如何自己编写一个按钮以及qml多窗口。
参考WX桌面版#xff0c;做一个登录界面#xff0c;这里面按钮是写的一个组合控件#xff0c;有 按…最近在学习QT也初探到qml 做ui 的灵活性与强大于是手痒痒做个demo 记录下学习成果
主要内容是如何自己编写一个按钮以及qml多窗口。
参考WX桌面版做一个登录界面这里面按钮是写的一个组合控件有 按下释放以及正常 三种状态。
import QtQuick 2.0
import QtQuick.Controls 2.4Rectangle
{id:rootwidth:400height:50radius:6property alias text:rect_text.textproperty alias tip_text:btn_tip.textstate: rect_mouse.pressed ? pressed : (rect_mouse.containsMouse ? hovered : normal)//使用方可以处理这个信号来相应按钮点击signal btnclickedText{id:rect_textfont.pointSize: 16font.bold: truecolor:#ffffffanchors.horizontalCenter:parent.horizontalCenteranchors.verticalCenter: parent.verticalCenteranchors.verticalCenterOffset: 0}ToolTip{id:btn_tipfont.pointSize: 14delay: 500timeout: 2000x:parent.width/2y:parent.height}states: [State {name: pressedPropertyChanges { target: root; color: #01968c }},State {name: normalPropertyChanges { target: root; color: #00beac }},State {name: hoveredPropertyChanges { target: root; color: #20c9b3 }}]MouseArea{id:rect_mouseanchors.fill: parenthoverEnabled: true //是否处理悬浮事件默认false只有按下鼠标键时才处理鼠标事件为true时即使没有按下鼠标键也会作相应的处理preventStealing:true//默认为false为true时可以防止当前鼠标事件被其它对象拦截。propagateComposedEvents:true//默认为 false当设置为 true 时就可以将事件传递给重叠的其他鼠标区域了enabled: truecursorShape: Qt.PointingHandCursoronPressed:{rect_text.anchors.verticalCenterOffset 2state pressed}onEntered:{if(btn_tip.text ! ){btn_tip.x mouseXbtn_tip.y mouseYbtn_tip.open()console.log(btn_tip.x,btn_tip.y)}state hovered}onReleased:{if(rect_mouse.containsMouse)//鼠标在按钮范围才有效root.btnclicked()rect_text.anchors.verticalCenterOffset 0state hovered}onExited://鼠标离开时关闭{btn_tip.close()state normal}
// onClicked: {
// //btnclicked()
// }}
}然后在新增一个ChatDlg.qml文件里面写一个window 当作是登陆后的主界面
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.9Window {id: chatWindowvisible: truewidth: 800height: 600minimumWidth: 250minimumHeight: 150maximumWidth: 1000maximumHeight: 600color: whitetitle: qsTr(聊天窗口)Row{id: layoutRanchors.centerIn: parentspacing: 5 //行或列的像素间隔Column {ListView {id: chatGroupwidth: 180height: 500//anchors.verticalCenter: parent.verticalCentermodel: [聊天1,聊天2,聊天3,聊天4,聊天5,聊天6,聊天7,聊天8,聊天9,聊天10,聊天11]spacing: 2delegate: MyIconButton {btn_txt: modelData}}}Column {id: layoutC//anchors.centerIn: parentspacing: 5 //行或列的像素间隔Image {id: m_Logowidth: 600height: 250anchors.left: chatGroup.rightfillMode: Image.PreserveAspectFit //保持宽高比source: /new/img/048.jpg.emoji.jpg//anchors.verticalCenter: parent.verticalCenter}Rectangle {width: 600height: 250color: lightgreyborder.color: greyTextEdit {id: m_Inputwidth: 600height: 250//color: #20c9b3//anchors.top: m_Logo.bottom//anchors.horizontalCenter: parent.horizontalCenter//anchors.verticalCenter: parent.verticalCenter//anchors.left: chatGroup.right//anchors.leftMargin: 5}}//登录按钮MyButton {id: btnSendwidth: 168height: 36text: 发送//tip_text: enabled: trueonBtnclicked: {//showAni.start()}}}}}登录窗口设计如下 import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4Window {id: mainWindvisible: truewidth: 300height: 500minimumWidth: 250minimumHeight: 150maximumWidth: 1000maximumHeight: 600color: whitetitle: qsTr(WX)//头像Image {id: m_LogosourceSize.height: 100sourceSize.width: 100fillMode: Image.PreserveAspectFit //保持宽高比source: /new/img/048.jpg.emoji.jpganchors.horizontalCenter: parent.horizontalCentery: parent.height/6}Text {id: nametext: qsTr(小熊猫)anchors.horizontalCenter: parent.horizontalCenteranchors.top: m_Logo.bottomanchors.topMargin: 20}//登录后弹出聊天主界面ChatDlg {id: chatDialogvisible: false}//登录按钮MyButton {id: btn1width: 168height: 36text: 登录tip_text: Login your accountanchors.horizontalCenter: parent.horizontalCenteranchors.top: name.bottomanchors.topMargin: 50onBtnclicked: {chatDialog.visible truemainWind.visible false//showAni.start()}}
}
按下登录按钮后弹出主界面隐藏登录界面 你学废了吗
