М
МаркГленAug. 5, 2020, 10:58 a.m.

QML: изменение стиля при наведении и при нажатии на кнопку

hover, containsMouse, mouseArea, onhover

Получается сделать либо одно либо другое, но не то и другое одновременно.
так работает: color: parent.pressed ? "violet" : "pink"
и так тоже: color: mouseArea.containsMouse ? "blue" : "magenta"

А вот так уже нет:

if (parent.pressed)
{
   color: "red"
}
else if (mouseArea.containsMouse)
{
   color: "blue"
}
else
{
   color: "green"
}

Пробовал и по-другому писать условия, не получается.

qml hover press

Весь работающий (по отдельности) код:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    id: win
    visible: true
    width: 640
    height: 480
    title: qsTr("Hover and Press")

    ColumnLayout {
        anchors.fill: parent
        spacing: 25
        Item {
            Layout.fillHeight: true
        }
        Button {
            Layout.alignment: Qt.AlignCenter
            implicitWidth: 200
            implicitHeight: 100


            background: Rectangle {
                border.width:5
                border.color: parent.pressed ? "pink" : "violet"
                color: parent.pressed ? "violet" : "pink"
                radius: width/4

            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                font.bold: true
                text: "PRESS"
            }
          }
        }
        Button {
            Layout.alignment: Qt.AlignCenter
            implicitWidth: 200
            implicitHeight: 100
            MouseArea {
                id: mouseArea
                anchors.fill: parent
                hoverEnabled: true
            }


            background: Rectangle {
                border.width:5
                border.color: mouseArea.containsMouse ? "magenta" : "blue"
                color: mouseArea.containsMouse ? "blue" : "magenta"
                radius: width/4

            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                font.bold: true
                text: "HOVER"
            }
          }
        }
        Item {
            Layout.fillHeight: true
        }
    }
}

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

8
t
  • Aug. 5, 2020, 11:09 a.m.
  • (edited)
if (parent.pressed)
{
   return "red"
}
else if (mouseArea.containsMouse)
{
   return "blue"
}
else
{
   return "green"
}
    М
    • Aug. 5, 2020, 1:06 p.m.
    • (edited)

    Да, с синтаксисом были проблемы, спасибо за подсказку. Правильно было бы так:

    color: if (parent.pressed)
    {
       return "red"
    }
    else if (mouseArea.containsMouse)
    {
       return "blue"
    }
    else
    {
       return "green"
    }
    

    И всё же так работает только наведение, на нажатие не рагирует. Попробовал так:

    color: if (parent.pressed)
    {
       return "red"
    }
    else if (mouseArea.containsMouse & !parent.pressed)
    {
       return "blue"
    }
    else
    {
       return "green"
    }
    

    То же самое.

    Добавил в MouseArea

    onPressed: { bacgroundRectangle.color = 'red' }
    

    Результат как с onClicked - один раз меняется цвет и больше не реагирует на события.
    Поэтому добавил onReleased - поведение оказалось не таким как предполагалось интуитивно, но меня устроит. После отжимания, кнопка приобретает указанный цвет и больше не реагирует на наведение. В моём случае это и не понадобится, а могло бы.

    Не сказать что такой вариант устраивает, остаются вопросы, нехорошо. Но пока можно и так.
    С третьей кнопкой все целиком так. Если есть идеи по очеловечиванию этой кракозябры малой кровью то прошу пожалуйста.

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.12
    
    Window {
        id: win
        visible: true
        width: 640
        height: 480
        title: qsTr("Hover and Press")
    
        ColumnLayout {
            anchors.fill: parent
            spacing: 25
            Item {
                Layout.fillHeight: true
            }
            Button {
                Layout.alignment: Qt.AlignCenter
                implicitWidth: 200
                implicitHeight: 100
    
    
                background: Rectangle {
                    border.width:5
                    border.color: parent.pressed ? "pink" : "violet"
                    color: parent.pressed ? "violet" : "pink"
                    radius: width/4
    
                Text {
                    anchors.centerIn: parent
                    font.pointSize: 16
                    font.bold: true
                    text: "PRESS"
                }
              }
            }
            Button {
                Layout.alignment: Qt.AlignCenter
                implicitWidth: 200
                implicitHeight: 100
                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                }
    
    
                background: Rectangle {
                    border.width:5
                    border.color: mouseArea.containsMouse ? "magenta" : "blue"
                    color: mouseArea.containsMouse ? "blue" : "magenta"
                    radius: width/4
    
                Text {
                    anchors.centerIn: parent
                    font.pointSize: 16
                    font.bold: true
                    text: "HOVER"
                }
              }
            }
    
            Button {
                Layout.alignment: Qt.AlignCenter
                implicitWidth: 200
                implicitHeight: 100
                hoverEnabled: true
    
                MouseArea {
                    id: mouseArea2
                    anchors.fill: parent
                    hoverEnabled: true
                    onPressed: { bacgroundRectangle.color = 'red' }
                    onReleased: { bacgroundRectangle.color = 'gray' }
                }
    
                background: Rectangle {
                    id: bacgroundRectangle
                    border.width:5
                    color: mouseArea2.containsMouse ? "blue" : "green"
                    radius: width/4
    
                Text {
                    anchors.centerIn: parent
                    font.pointSize: 16
                    font.bold: true
                    text: "HOVER & PUSH"
                }
              }
            }
            Item {
                Layout.fillHeight: true
            }
        }
    }
    
      М
      • Aug. 5, 2020, 4:48 p.m.
      • (edited)

      Читал доки. Узнал про сигналы entered, exited в MouseArea QML Type.
      С ним можно сделать то о чём спрашивал, хотя может это и не лучший способ.
      А вот не спросил бы - не стал бы читать доков наверное, не знаю почему так.

        t
        • Aug. 5, 2020, 5:33 p.m.
        onPressed: { bacgroundRectangle.color = 'red' }
        

        Ломает биндинг, поэтому лучше не использовать.

          М
          • Aug. 6, 2020, 1:36 a.m.

          Ломает биндинг

          Как раз как бы его теперь сломать, чтобы после отжимания кнопка становилась серой и больше ни на что не реагировала.

          Так работает превосходно, если бы только биндинг не нужно было сломать, как оказалось:

          Button {
                      Layout.alignment: Qt.AlignCenter
                      implicitWidth: 200
                      implicitHeight: 100
                      hoverEnabled: true
          
                      MouseArea {
                          anchors.fill: parent
                          hoverEnabled: true
                          onPressed: { bacgroundRectangle.color = 'blue'
                          console.log("pressed?", pressed)
                          }
                          onReleased: { bacgroundRectangle.color = 'yellow'
                              console.log("released?", released)
                          }
                          onExited: { bacgroundRectangle.color = 'green'
                              console.log("exited?", exited)
                          }
                          onEntered: { bacgroundRectangle.color = 'yellow'
                              console.log("entered?", entered)
                          }
                      }
          
                      background: Rectangle {
                          id: bacgroundRectangle
                          border.width:5
                          color: "green"
                          radius: width/4
          
                      Text {
                          anchors.centerIn: parent
                          font.pointSize: 16
                          font.bold: true
                          text: "HOVER & PUSH"
                      }
                    }
                  }
          
            U
            • Aug. 6, 2020, 4:59 a.m.
            • (edited)
            • The answer was marked as a solution.
            Button{
                id: myButton
            
                MouseArea {
                    hoverEnabled: true
                    onReleased: myButton.enabled = false        
                }
            }
            

            Так кнопка перестанет быть активной и не будет ни на что реагировать)
            Ну там всякие anchors.fill: parent и тп - добавить по вкусу)

              М
              • Aug. 6, 2020, 5:49 a.m.

              enabled = false
              перестанет быть активной и не будет ни на что реагировать)

              Хм.. по-моему пробовал такое. Проверю ещё раз после работы.

                М
                • Aug. 6, 2020, 3:37 p.m.

                enabled = false
                перестанет быть активной и не будет ни на что реагировать)

                Хм.. по-моему пробовал такое. Проверю ещё раз после работы.

                Ура, спасибо большое! Работает.

                Всем спасибо за подсказки.

                  Comments

                  Only authorized users can post comments.
                  Please, Log in or Sign up
                  AD

                  C ++ - Test 004. Pointers, Arrays and Loops

                  • Result:50points,
                  • Rating points-4
                  m

                  C ++ - Test 004. Pointers, Arrays and Loops

                  • Result:80points,
                  • Rating points4
                  m

                  C ++ - Test 004. Pointers, Arrays and Loops

                  • Result:20points,
                  • Rating points-10
                  Last comments
                  i
                  innorwallNov. 11, 2024, 10:12 p.m.
                  Django - Tutorial 055. How to write auto populate field functionality Freckles because of several brand names retin a, atralin buy generic priligy
                  i
                  innorwallNov. 11, 2024, 6:23 p.m.
                  QML - Tutorial 035. Using enumerations in QML without C ++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
                  i
                  innorwallNov. 11, 2024, 3:50 p.m.
                  Qt/C++ - Lesson 052. Customization Qt Audio player in the style of AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
                  i
                  innorwallNov. 11, 2024, 2:19 p.m.
                  Heap sorting algorithm The role of raloxifene in preventing breast cancer priligy precio
                  i
                  innorwallNov. 11, 2024, 1:55 p.m.
                  PyQt5 - Lesson 006. Work with QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
                  Now discuss on the forum
                  i
                  innorwallNov. 11, 2024, 8:56 p.m.
                  добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
                  i
                  innorwallNov. 11, 2024, 10:55 a.m.
                  Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
                  9
                  9AnonimOct. 25, 2024, 9:10 a.m.
                  Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

                  Follow us in social networks