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
}
}
5、效果
6、工程下载
https://download.csdn.net/download/weixin_40713604/35680313