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

最新推荐文章于 2024-07-23 00:16:43 发布

kingmei130283

最新推荐文章于 2024-07-23 00:16:43 发布

阅读量1.2k

点赞数

分类专栏： QT 网络

本文链接：https://blog.csdn.net/kingmei130283/article/details/72897806

版权

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

摘要由CSDN通过智能技术生成

分页切换显示效果

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