М
МаркГлен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
                  ИМ
                  Игорь МаксимовNov. 22, 2024, 10:51 p.m.
                  Django - Tutorial 017. Customize the login page to Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                  Evgenii Legotckoi
                  Evgenii LegotckoiNov. 1, 2024, 12:37 a.m.
                  Django - Lesson 064. How to write a Python Markdown extension Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                  A
                  ALO1ZEOct. 19, 2024, 6:19 p.m.
                  Fb3 file reader on Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                  ИМ
                  Игорь МаксимовOct. 5, 2024, 5:51 p.m.
                  Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                  d
                  dblas5July 5, 2024, 9:02 p.m.
                  QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                  Now discuss on the forum
                  m
                  moogoNov. 22, 2024, 6:17 p.m.
                  Mosquito Spray System Effective Mosquito Systems for Backyard | Eco-Friendly Misting Control Device & Repellent Spray - Moogo ; Upgrade your backyard with our mosquito-repellent device! Our misters conce…
                  Evgenii Legotckoi
                  Evgenii LegotckoiJune 25, 2024, 1:11 a.m.
                  добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
                  t
                  tonypeachey1Nov. 15, 2024, 5:04 p.m.
                  google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
                  NSProject
                  NSProjectJune 4, 2022, 1:49 p.m.
                  Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…

                  Follow us in social networks