QT QML初体验随笔之QQuickView(10)

最新推荐文章于 2025-07-03 14:11:06 发布

kingmei130283

最新推荐文章于 2025-07-03 14:11:06 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： QT 网络

本文链接：https://blog.youkuaiyun.com/kingmei130283/article/details/72897806

QT 同时被 2 个专栏收录

16 篇文章

订阅专栏

网络

4 篇文章

订阅专栏

本文介绍了QT QML中QQuickView的使用，包括工具按钮、视图显示的实现，详细讲解了如何通过编码实现分页切换效果，涉及到按键索引、颜色渐变、动画效果以及网络控件的处理。同时，文章总结了内嵌元素透明处理和视图群控件的显示策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分页切换显示效果

1.效果如图

2.背景

QT QML初体验随笔之QQuickView(9)

3.编码

工具按钮实现

按键的索引值：关联控制对应的视图
颜色线性渐变方向与显示图标文字的处理
pushBtn的鼠标效果

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";
    }
}

切换显示效果控件形成

import QtQuick 2.0
import "../Base_1"
import "../Base_1_1"

Rectangle {
    id: tabWidget;

    // 尺寸
    width: parent.width;
    height: parent.height;

    // 颜色
    color: "transparent";

    VToolBtnGrp_Kingmei {
        id: toolBtns;

        onVToolBtnIndexChanged: {
            vViewGrp.indexChanged(curIndex);
        }
    }


    Rectangle {
        id: background;

        // 锚布局
        anchors.left: toolBtns.right;
        anchors.right: parent.right;
        anchors.top: parent.top;
        anchors.bottom: parent.bottom;

        // 元素透明度
        opacity: 0.1;

        // 边界样式
//        border.width: 2;
//        border.color: "#ff808080";
    }

    VViewGrp_Kingmei {
        id: vViewGrp;

        // 锚布局
        anchors.left: background.left;
        anchors.right: background.right;
        anchors.top: background.top;
        anchors.bottom: background.bottom;
    }

}