M
MarkGlenAug. 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.
8
t
if (parent.pressed)
{
   return "red"
}
else if (mouseArea.containsMouse)
{
   return "blue"
}
else
{
   return "green"
}
M

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

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
        }
    }
}
M

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

t
onPressed: { bacgroundRectangle.color = 'red' }

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

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 и тп - добавить по вкусу)

M

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

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

M

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

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

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

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

Comments

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

Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting
k
  • knobu
  • Sept. 23, 2020, 2:34 a.m.

C++ - Test 006. Enumerations

  • Result:60points,
  • Rating points-1
k
  • knobu
  • Sept. 23, 2020, 2:21 a.m.

C++ - Test 005. Structures and Classes

  • Result:91points,
  • Rating points8
k
  • knobu
  • Sept. 23, 2020, 2:16 a.m.

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

  • Result:80points,
  • Rating points4
Last comments

Qt/C++ - Lesson 006. QSqlQueryModel – Tables in Qt with SQL-query

QSqlTableModel выполняет ряд стандартных операций для одной таблицы из базы данных. Поэтому там и реализован функционал по удалению и редактированию. QSqlQueryModel позволяет выполнить запр…
VB

Qt/C++ - Lesson 006. QSqlQueryModel – Tables in Qt with SQL-query

Добрый день. Хотел спросить вот что. Создал проект на основе QAbstractTableModel. В MainWindow cоответственно создал модель и связал с представлением. Поиск веду по списку элементов модели,…

QCheckBox в качестве делегата QTableView

До тех пор, пока у вас проект содержит только одну таблицу, или несколько то может быть. Когда их будет 1000 и чекбоксы в разных колонках, то без делегатов и переопределения возвращаемых ре…
D
  • Damir
  • Sept. 20, 2020, 3:34 p.m.

QCheckBox в качестве делегата QTableView

bool Node::setData(const QModelIndex& index, const QVariant& value, int role){ switch (index.column()) { case 0: switch (role) { case Qt::CheckStateRole:// <- т…
VB

Qt/C++ - Lesson 004. QSqlTableModel – How to present the table from database?

Почему-то такой метод для обновления не работает, который можно было бы применить в данном примере. То есть в представлении данные удаляются и обновляются, а в базе данных изменений не происходи…
Now discuss on the forum

Как в Qt в qmenu добавить scrollarea

Вот это наследованный класс меню. Но посути это обычное меню. #pragma once#include <QtWidgets>class TransMenu : public QMenu { Q_OBJECTpublic: TransMenu(QWidget* parent = …

Как в qml работать с динамически созданными потомками?

В QML есть сборщик мусора, он может удалять объекты не сразу а по ппрошествии времени. Попробуйте при удалении вызывать сборщик мусора принудительно через gc()
VB

Как запустить программу с базой данных PostgreSQL на другом компьютере

Не требует никакую библиотеку, запускается на других компьютерах, где не установлена PostgreSQL, но создать элемент невозможно, тем более отредактировать или удалить.
p
  • prod1s
  • Sept. 24, 2020, 7:12 a.m.

через QT не могу открыть файл SQLite

Вирішення знайшов. Вказав замість назви БД об'єкт класу QSqlDataBase для QSqlQuery. QSqlQuery m_query = QSqlQuery(qSqlDataBase); Після двох днів пошуку рішення, все-таки знайшов…
U

как скрыть елемент с копии виджета

Дело в том, что ui класса находится в private-секции... И из-вне доступ получить, не нарушая канонов - не получится) Можно конечно сделать что-то в духе #define private public, но это для истинн…
About
Services
© EVILEG 2015-2020
Recommend hosting TIMEWEB