分页切换显示效果
QT QML初体验随笔之QQuickView(9)
import QtQuick 2.0 Rectangle { id: toolBtn; // 尺寸 height: 80; width: 80; // 索引号 property int index: 0; signal clicked(int index); // 顺时针旋转 rotation: 90; // 背景颜色 property color bckgrndColor: "#00ffffff"; // 白色透明 // 引用 property alias iconSrc: btnIcon.source; property alias text: btnText.text; Rectangle { id: background; // 锚布局 anchors.fill: parent; // 元素透明度 opacity: 0.1; // 边界样式 // border.width: 2; // border.color: "#ff808080"; } Column { id: vLayout; // 锚布局 anchors.topMargin: 10; anchors.leftMargin: 10; anchors.fill: parent; //spacing: 1; // children隔开1个像素 rotation: -parent.rotation; Image { id: btnIcon; } Text { id: btnText; // miniJXK字体 FontLoader { id: miniJXK; source: "Repository/Font/miniJXK.TTF"; } font.family: miniJXK.name; color: "#ffffffff"; } } // 渐变 gradient: colorGradient; Gradient { id: colorGradient; GradientStop { position: 0.0; color: "#00ffffff"; } GradientStop { position: 1.0; color: bckgrndColor; } } // 动画 transitions: [ Transition { PropertyAnimation { property: "bckgrndColor"; easing {// 线性渐变 type: Easing.Linear; } duration: 200 // ms } } ] // 背景颜色控制-状态切换：按下，悬停进入，悬停离开 states: [ State { name: "pressed"; PropertyChanges { target: toolBtn; bckgrndColor: "#88ffffff"; } }, State { name: "hover_in"; PropertyChanges { target: toolBtn; bckgrndColor: "#88ffffff"; } }, State { name: "hover_out"; PropertyChanges { target: toolBtn; bckgrndColor: "#00ffffff"; } } ] // 鼠标活动区域 MouseArea { // 锚布局 anchors.fill: parent; // 悬停 hoverEnabled: true; // 启用鼠标悬停 onEntered: { // 悬停进入 "pressed" == parent.state? parent.state = "pressed": parent.state = "hover_in"; } onExited: { // 悬停离开 "pressed" == parent.state? parent.state = "pressed": parent.state = "hover_out"; } // 按下 onClicked: { parent.state = "pressed"; parent.clicked(index); } } }
import QtQuick 2.0 Rectangle { id: view; // 尺寸 height: parent.height; width: parent.width; // 颜色 color: "transparent"; // 索引值 property int index: 0; // 状态 state: "hide"; states: [ State { name: "active"; PropertyChanges { target: view; y: parent.y; } }, State { name: "hide"; PropertyChanges { target: view; y: parent.height; } } ] // 动画效果 transitions: [ Transition { PropertyAnimation{ property: "y"; easing.type: Easing.OutBounce; easing.amplitude: 0.1; duration: 500; } } ] }
import QtQuick 2.0 import "../Base" Column { id: vToolBtnGrp; // 状态 readonly property string statePressed: "pressed"; readonly property string stateHoverIn: "hover_in"; readonly property string stateHoverOut: "hover_out"; signal vToolBtnIndexChanged(int btnIndex); // 图标存储路径 readonly property string imgPath: "../Base_1/Image/"; // 分隔符 spacing: 2; // spacing: 12; // 当前按钮索引值 property int curIndex: 0; onCurIndexChanged: { resetToolBtn(); vToolBtnIndexChanged(curIndex); } // 重置按钮状态 function resetToolBtn() { for(var i = 0; i < vToolBtnGrp.children.length; ++i) { vToolBtnGrp.children[i].state = (vToolBtnGrp.curIndex == i ? statePressed : stateHoverOut); } } ToolBtn_Kingmei { id: vToolBtn0; // 索引值 index: 0; // 状态 state: parent.statePressed; // 图标源 iconSrc: parent.imgPath + "Network.png"; // 文本 text: "TCP/IP"; // 点击按钮槽函数 onClicked: { vToolBtnGrp.curIndex = index; } } ToolBtn_Kingmei { id: vToolBtn1; // 索引值 index: 1; // 图标源 iconSrc: parent.imgPath + "Network.png"; // 文本 text: "UDP"; // 点击按钮槽函数 onClicked: { vToolBtnGrp.curIndex = index; } } }
import QtQuick 2.0 import "../Base" Rectangle { id: vViewGrp; // clip: true; // 颜色 color:"transparent"; // original index property int orgIndex: 0; // 状态 readonly property string stateActive: "active"; readonly property string stateHide: "hide"; // 索引值改变 function indexChanged(curIndex) { vViewGrp.children[curIndex].y = parent.y - parent.height; // 没有这句窗口动画会是怎样？ vViewGrp.children[curIndex].state = stateActive; vViewGrp.children[orgIndex].state = stateHide; orgIndex = curIndex; } VView_Kingmei { id: vView0; state: parent.stateActive; TcpClient_V_Kingmei { id: tcpClientV; } } VView_Kingmei { id: vView1; Text { id: input; anchors.centerIn: parent; text: qsTr("UDP 还没有进行处理"); } } }
将原先在main.qml中处理的网络进行重新整理
import QtQuick 2.0 import QtQuick.Dialogs 1.1 import "../Base_1" import "../Base" Rectangle { id: tcpClientV; // 尺寸 height: parent.height; width: parent.width; // 颜色 color:"transparent"; // 接收测速属性 property int recvTotalLen: 0; property int recvLenTmp: 0; property int recvCnt: 0; NetCtrl_Kingmei { id: netCtrl; // 锚布局 anchors.leftMargin: 10; anchors.topMargin: 10; anchors.left: parent.left; anchors.top: parent.top; // 网络连接标识 property bool bConnect: true; // 按下槽函数 onClicked: { indicatorState = indicatorWait; if(bConnect) { if(tcpClient.connectToHost(ip, port)) { indicatorState = indicatorCorrect; setEnabled(false); bConnect = false; tcpClientV.recvTotalLen = 0; tcpClientV.recvLenTmp = 0; tcpClientV.recvCnt = 0; secondCnt.start(); } else { indicatorState = indicatorError; setEnabled(true); } } else { if(tcpClient.disconnect()) { indicatorState = indicatorNormal; setEnabled(true); bConnect = true; secondCnt.stop(); } else { indicatorState = indicatorError; } } } } // 时间定时器 Timer { id: secondCnt; // 周期时间设定 interval: 1000; // 周期触发，还是一次触发 repeat: true; // 立刻触发一次 triggeredOnStart: true; onTriggered: { parent.recvTotalLen = tcpClient.getRecvTotalLen(); if(parent.recvLenTmp != parent.recvTotalLen) { ++parent.recvCnt; parent.recvLenTmp = parent.recvTotalLen; // test.input = parent.recvLenTmp*1.0/1024/1024/parent.recvCnt; recvDatV.input = (parent.recvLenTmp*1.0/1024/1024/parent.recvCnt).toFixed(2); // real 截取小数位 } else { parent.recvLenTmp = 0; parent.recvTotalLen = 0; parent.recvCnt = 0; } } } // LCD显示接收速率 LcdNumber_Kingmei { id: recvDatV; anchors.centerIn: parent; input: 0; font.pixelSize: 60; // color: "red"; } // 连接失败结果 Connections { target: tcpClient; onError: { console.log("error:", socketError, message); msgDlg.text = message; msgDlg.open(); } } MessageDialog { id: msgDlg; icon: StandardIcon.Warning; title: "socket error"; } }
