Qml 图片和加载器操作

news2024/9/21 19:09:30

学习目标：Qml 图片和加载器编程

学习前置

Qt Qml编程基础部分认识qml-CSDN博客

实现效果

对图片的基本操作

加载器

核心代码

加载器

思路：创建一个加载器默认是几个圆点，我们重写加载器元素（contentItem），定义了一个矩形，通过参数设置变成一个圆，重写渐变，效果增加圆过渡动画

import QtQuick 2.12
import QtQuick.Window 2.12


import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0

//等待指示器  操作需要长时间加载或处理时显示加载状态。
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    BusyIndicator{
        id:buys

        anchors.centerIn: parent
        implicitWidth: 200
        implicitHeight: 200

        contentItem: Item { //定义了BusyIndicator的内容
            id: itm1
            Rectangle{ //用于绘制 BusyIndicator 的外围边框
                id:rect1
                width: parent.width
                height: parent.height
                color: Qt.rgba(0,0,0,0);
                radius: width/2
                //控制圆圈的粗细
                border.width:  width/8
                visible: true //边框可见
            }

            ConicalGradient{//一个锥形渐变元素,用于绘制 BusyIndicator 的旋转圆圈。
                width: rect1.width
                height: rect1.height
                source: rect1 //渐变效果的源图像


                gradient: Gradient{  //渐变效果
                    GradientStop {position: 0.0;color:"black"} //圆圈颜色
                    GradientStop {position: 1.0;color:"white"} // 跟踪圆圈旋转后面的颜色
                }

                

                Rectangle{ //红色动点
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: rect1.border.width
                    height: width
                    radius: width/2
                    color: "red"
                }

                RotationAnimation on rotation {  //过渡旋转动画
                    from:0
                    to:360
                    duration: 2000
                    loops: Animation.Infinite;//循环
                }
            }


        }


    }

}

图片

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Image元素--测试程序")



    Column{
        anchors.centerIn: parent
        spacing: 8 //间隔
        Image {
            width: 60
            height: 60
            source: "qrc:a.jpg"
            //填充模式不会变形
            fillMode: Image.Pad
        }

        Image {
            width: 20
            height: 20
            source: "qrc:a.jpg"
            fillMode: Image.PreserveAspectFit // 图像填充模式--按照比例缩放填充 不裁剪
        }

        Image {
            width: 40
            height: 40
            source: "qrc:a.jpg"

            fillMode: Image.TileVertically // 图像填充模式--水平填充 垂直复制


        }

        Image {
            width: 80
            height: 80
            source: "qrc:a.jpg"
            fillMode: Image.TileHorizontally // 图像填充模式--垂直填充 水平复制

        }
    }
}