|
Создать image кнопку чтоб при нажатии менялась кртинка
|
|
| Romko | Дата: Вторник, 26.07.2011, 00:48 | Сообщение # 1 |
 Постоялец
Группа: Проверенные
Сообщений: 22
Статус: Offline
| Подскажите пожалуйста как мне создать image кнопку чтоб при нажатии менялась кртинка.
Пробовал через if/else через проверки по source, но с относительным путем не работает...
Code Image {
id: play
y: 315
width: 40
height: 39
anchors.left: parent.left
anchors.leftMargin: 53
anchors.bottom: parent.bottom
anchors.bottomMargin: 7
source: "play.jpg"
MouseArea {
id: mouse_area1
x: 0
y: 0
width: 40
height: 39
drag.minimumY: -1000
drag.minimumX: -1000
drag.maximumY: 1000
drag.maximumX: 1000
scale: 1
anchors.topMargin: 0
anchors.fill: parent
acceptedButtons: Qt.LeftButton
onClicked: {
if (play.source == "play.jpg" )
{ play.source = "pause.jpg"; track_panel.opacity = 0.5}
else
{play.source = "play.jpg"; track_panel.opacity = 1}
}
}
}
Мне посоветовали поставить флаг и тд, но я в этом не могу ничего понять. Пробую программировать относительно недавно.
Как ещё можно реализовать эту функцию?
|
| |
| |
| CYAN | Дата: Вторник, 26.07.2011, 03:08 | Сообщение # 2 |
 Администратор
Группа: Администраторы
Сообщений: 21
Статус: Offline
| Лучше будет сделать через стэйты. Опять же, и анимацию будет потом проще прикрутить.
Code import QtQuick 1.0
Rectangle {
width: 200
height: 200
Image {
id: button
x: 50
y: 50
width: 100
height: 100
smooth: true
visible: true
clip: true
opacity: 1.0
source: "released.jpg"
property bool pressed: false
states:[
State {
name: "BUTTON_PRESSED"
PropertyChanges { target: button; source: "pressed.jpg"}
},
State {
name: "BUTTON_RELEASED"
PropertyChanges { target: button; source: "released.jpg"}
}
]
MouseArea{
anchors.fill:parent
anchors.bottom: parent.bottom
width:parent.width
height: parent.height
onPressed:{
if (button.pressed == false){
button.state = "BUTTON_PRESSED"
button.pressed = true
} else{
button.state = "BUTTON_RELEASED"
button.pressed = false
}
}
}
}
}
В аттаче - рабочий пример с картинками.
|
| |
| |
| Romko | Дата: Среда, 27.07.2011, 20:40 | Сообщение # 3 |
|
Постоялец
Группа: Проверенные
Сообщений: 22
Статус: Offline
| Всё подключил, но из-за того что картинка имеет id:... смена картинки не хочет работать, если за коментировать id работает смена картинки , а id мне нужно для других стейтов.
Code Image {
id: sound
x: 579
y: 19
width: 15
height: 15
anchors.left: parent.left
anchors.leftMargin: 579
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
scale: 1
opacity: 0.6
source: "sound.jpg"
property bool pressed: false
MouseArea {
id: mouse_area8
anchors.fill: parent
onPressed:{
if (sound.pressed == false)
{sound.state = "sound_PRESSED"
sound.pressed = true}
else{sound.state = "sound_off_RELEASED"
sound.pressed = false}
}
}
states:[
State
{
name: "sound";
when: mouse_area8.pressed;
PropertyChanges { target: sound; opacity: 0.45;}
},
State
{
name: "sound1"
when: mouse_area8.pressed == false;
PropertyChanges { target: sound; opacity: 0.6; }
},
State {
name: "sound_PRESSED"
PropertyChanges { target: sound; source: "sound_off.jpg"}
},
State {
name: "sound_off_RELEASED"
PropertyChanges { target: sound; source: "sound.jpg"}
}
]
Behavior on opacity
{NumberAnimation { duration: 100 }}
} |
| |
| |
| CYAN | Дата: Среда, 27.07.2011, 22:06 | Сообщение # 4 |
|
Администратор
Группа: Администраторы
Сообщений: 21
Статус: Offline
| У тебя, по сути, получилось дублирование условий для стэйтов. А что мешает их объединить?
Вот так всё работает:
Code
Image {
id: sound
x: 200
y: 200
width: 100
height: 100
scale: 1
opacity: 0.6
source: "sound.jpg"
property bool pressed: false
MouseArea {
id: mouse_area8
anchors.fill: parent
onPressed:{
if (sound.pressed == false) {
sound.state = "sound_PRESSED"
sound.pressed = true
}
else{
sound.state = "sound_off_RELEASED"
sound.pressed = false
}
}
}
states:[
State {
name: "sound_PRESSED"
PropertyChanges { target: sound; source: "sound_off.jpg"}
PropertyChanges { target: sound; opacity: 0.45;}
},
State {
name: "sound_off_RELEASED"
PropertyChanges { target: sound; source: "sound.jpg"}
PropertyChanges { target: sound; opacity: 0.6; }
}
]
Behavior on opacity
{NumberAnimation { duration: 100 }}
}
|
| |
| |
| Romko | Дата: Четверг, 28.07.2011, 03:11 | Сообщение # 5 |
|
Постоялец
Группа: Проверенные
Сообщений: 22
Статус: Offline
| Неа, немного не то получается. Вообще это должна получится кнопка play/pause которая будет переключатся с одного на другое, но при нажатии на кнопку она становиться на момент нажатия немного прозрачной.
То есть оно должно менять картинку как в плеере (нажимаем на:play, появляется пауза и наоборот) но прозрачность только на время нажатия самой кнопки.
|
| |
| |
| CYAN | Дата: Четверг, 28.07.2011, 23:04 | Сообщение # 6 |
|
Администратор
Группа: Администраторы
Сообщений: 21
Статус: Offline
| Идею понял 
Пробуй вот так:
Code
import QtQuick 1.0
Rectangle {
width: 500
height: 500
Image {
id: sound
x: 200
y: 200
width: 100
height: 100
scale: 1
opacity: 1.0
source: "sound.jpg"
property bool pressed: false
MouseArea {
id: mouse_area8
anchors.fill: parent
onReleased: {
sound.opacity = 1.0
if (sound.pressed == false) {
sound.state = "sound_PLAY"
sound.pressed = true
}
else{
sound.state = "sound_STOP"
sound.pressed = false
}
}
onPressed: {
sound.opacity = 0.4
}
}
states:[
State {
name: "sound_PLAY"
PropertyChanges { target: sound; source: "sound_off.jpg"}
},
State {
name: "sound_STOP"
PropertyChanges { target: sound; source: "sound.jpg"}
}
]
Behavior on opacity
{NumberAnimation { duration: 200 }}
}
}
|
| |
| |
