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

    qml实现图片切换

  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、效果

qml实现图片切换
qml实现图片切换qml实现图片切换

6、工程下载

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

上一篇:信步漫谈之Redis—集群方案(Linux下搭建Cluster集群)


下一篇:使用filters实现时间过滤