qml实现图片切换

qml实现图片切换

1、环境

qt 5.12.3版本

2、控件

1. 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().
   
   
   
   

   

2. Image

3. TextInput

3、知识点及原理

1. 信号与槽

2. 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
        }


}

5、效果

6、工程下载

https://download.csdn.net/download/weixin_40713604/35680313