Русскоязычный портал о QML и QtQuick, QmlPortal What the duck
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум QML » QML форум » Вопросы по QML » Создать image кнопку чтоб при нажатии менялась кртинка (Создание кнопок)
Создать image кнопку чтоб при нажатии менялась кртинка
RomkoДата: Вторник, 26.07.2011, 00:48 | Сообщение # 1
Постоялец
Группа: Проверенные
Сообщений: 22
Награды: 0
Репутация: 2
Статус: 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
Награды: 1
Статус: 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
                  }
              }
          }
      }
}


В аттаче - рабочий пример с картинками.
Прикрепления: main.rar (6.5 Kb)
 
RomkoДата: Среда, 27.07.2011, 20:40 | Сообщение # 3
Постоялец
Группа: Проверенные
Сообщений: 22
Награды: 0
Репутация: 2
Статус: 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
Награды: 1
Статус: 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
Награды: 0
Репутация: 2
Статус: Offline
Неа, немного не то получается. Вообще это должна получится кнопка play/pause которая будет переключатся с одного на другое, но при нажатии на кнопку она становиться на момент нажатия немного прозрачной.

То есть оно должно менять картинку как в плеере (нажимаем на:play, появляется пауза и наоборот) но прозрачность только на время нажатия самой кнопки.
 
CYANДата: Четверг, 28.07.2011, 23:04 | Сообщение # 6
Администратор
Группа: Администраторы
Сообщений: 21
Награды: 1
Статус: Offline
Идею понял smile

Пробуй вот так:
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 }}
     }
}
 
Форум QML » QML форум » Вопросы по QML » Создать image кнопку чтоб при нажатии менялась кртинка (Создание кнопок)
  • Страница 1 из 1
  • 1
Поиск: