М
МаркГлен5 августа 2020 г. 10:58

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

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
8
t
  • 5 августа 2020 г. 11:09
  • (ред.)
if (parent.pressed)
{
   return "red"
}
else if (mouseArea.containsMouse)
{
   return "blue"
}
else
{
   return "green"
}
М

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

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

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

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

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

М

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

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

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

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
  • 6 августа 2020 г. 4:59
  • (ред.)
  • Ответ был помечен как решение.
Button{
    id: myButton

    MouseArea {
        hoverEnabled: true
        onReleased: myButton.enabled = false        
    }
}

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

М

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

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

М

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

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

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

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

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Timeweb

Позвольте мне порекомендовать вам отличный хостинг, на котором расположен EVILEG.

В течение многих лет Timeweb доказывает свою стабильность.

Для проектов на Django рекомендую VDS хостинг

Посмотреть Хостинг
k
  • knobu
  • 23 сентября 2020 г. 2:34

C++ - Тест 006. Перечисления

  • Результат:60баллов,
  • Очки рейтинга-1
k
  • knobu
  • 23 сентября 2020 г. 2:21

C++ - Тест 005. Структуры и Классы

  • Результат:91баллов,
  • Очки рейтинга8
k
  • knobu
  • 23 сентября 2020 г. 2:16

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:80баллов,
  • Очки рейтинга4
Последние комментарии

Qt/C++ - Урок 006. QSqlQueryModel - Таблицы в Qt с помощью SQL-запросов

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

Qt/C++ - Урок 006. QSqlQueryModel - Таблицы в Qt с помощью SQL-запросов

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

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

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

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++ - Урок 004. QSqlTableModel или Как представить таблицу из БД в Qt?

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

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

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

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

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

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

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

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

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

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

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