qml实现图片切换

2021/10/31 6:15:22

编程Tag： 图片切换 number interval sT timer qml running

本文主要是介绍qml实现图片切换，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

qml实现图片切换

1、环境

qt 5.12.3版本

2、控件

Timer

Timer QML Type
Triggers a handler at a specified interval. More...

Import Statement:
import QtQml 2.12

List of all members, including inherited members
Properties
interval : int
repeat : bool
running : bool
triggeredOnStart : bool
Signals
triggered()
Methods
restart()
start()
stop()
Detailed Description
A Timer can be used to trigger an action either once, or repeatedly at a given interval.
Here is a Timer that shows the current date and time, and updates the text every 500 milliseconds. It uses the JavaScript Date object to access the current time.

import QtQuick 2.0

Item {
Timer {
interval: 500; running: true; repeat: true
onTriggered: time.text = Date().toString()
}

Text { id: time }
}

The Timer type is synchronized with the animation timer. Since the animation timer is usually set to 60fps, the resolution of Timer will be at best 16ms.
If the Timer is running and one of its properties is changed, the elapsed time will be reset. For example, if a Timer with interval of 1000ms has its repeat property changed 500ms after starting, the elapsed time will be reset to 0, and the Timer will be triggered 1000ms later.
See also Qt Quick Demo - Clocks.
Property Documentation

interval : int

Sets the interval between triggers, in milliseconds.
The default interval is 1000 milliseconds.

repeat : bool

If repeat is true the timer is triggered repeatedly at the specified interval; otherwise, the timer will trigger once at the specified interval and then stop (i.e. running will be set to false).
repeat defaults to false.
See also running.

running : bool

If set to true, starts the timer; otherwise stops the timer. For a non-repeating timer, running is set to false after the timer has been triggered.
running defaults to false.
See also repeat.

triggeredOnStart : bool

When a timer is started, the first trigger is usually after the specified interval has elapsed. It is sometimes desirable to trigger immediately when the timer is started; for example, to establish an initial state.
If triggeredOnStart is true, the timer is triggered immediately when started, and subsequently at the specified interval. Note that if repeat is set to false, the timer is triggered twice; once on start, and again at the interval.
triggeredOnStart defaults to false.
See also running.

Signal Documentation

triggered()

This signal is emitted when the Timer times out.
The corresponding handler is onTriggered.

Method Documentation

restart()

Restarts the timer
If the Timer is not running it will be started, otherwise it will be stopped, reset to initial state and started. The running property will be true following a call to restart().

start()

Starts the timer
If the timer is already running, calling this method has no effect. The running property will be true following a call to start().

stop()

Stops the timer
If the timer is not running, calling this method has no effect. The running property will be false following a call to stop().

Image
TextInput

3、知识点及原理

信号与槽
number_st 状态，通过切换数值状态从而改变图片，实现切图目的

4、核心代码

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    //number 状态，通过切换数值状态从而改变图片，实现切图目的
    property int number_st: 0

    Timer{
        id: timer
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            number_st = number_st + 1
            if(number_st > 9)
            {
                number_st = 0
            }
        }
    }

    
    Connections{
        target: timer
        onTriggered:{
            if(number_st == 0)
            {
                img.source = "pic/num_0.jpg"
            }
            else if(number_st == 1)
            {
                img.source = "pic/num_1.jpg"
            }
            else if(number_st == 2)
            {
                img.source = "pic/num_2.jpg"
            }
            else if(number_st == 3)
            {
                img.source = "pic/num_3.jpg"
            }
            else if(number_st == 4)
            {
                img.source = "pic/num_4.jpg"
            }
            else if(number_st == 5)
            {
                img.source = "pic/num_5.jpg"
            }
            else if(number_st == 6)
            {
                img.source = "pic/num_6.jpg"
            }
            else if(number_st == 7)
            {
                img.source = "pic/num_7.jpg"
            }
            else if(number_st == 8)
            {
                img.source = "pic/num_8.jpg"
            }
            else
            {
                img.source = "pic/num_9.jpg"
            }



        }
    }



    Image {
        id: img
        anchors.centerIn: parent
        width: 30
        height: 48
        source: "pic/num_0.ico"
    }

        TextInput {
            id: textInput
            x: 320-width/2
            y: 240-height*1.5
            width: 160
            height: 40
            text: qsTr("数字循环")
            font.pointSize: 16
            font.family: "Arial"
            renderType: Text.NativeRendering
            horizontalAlignment: Text.AlignHCenter
        }


}