Кастомный баттон qml со своими стилями

Question

27 апреля 2020 г. 14:14

Кастомный баттон qml со своими стилями

Всем привет.
Появилась необходимость сделать свою qml кнопку, то есть расширить стандартную из 2 контролов.
Например нужно в оформлении кнопки сделать декорацию вертикальную или горизонтальную.
Если горизонтальная то сверху и снизу на кнопке прочерчиваем 2 прямые на растоянии от границы кнопки например 7 пикселей, и внутри этой декорации меняем цвет например на белый если нажали на кнопку.
Буду очень признателен если кто то накинет примерно код такой кнопки.
Изменение в стиле придется делать много, а исходя из этого я хоть разберу как это работает. Особенно в дизайне.
Спасибо.

Рекомендуем хостинг TIMEWEB

Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Подписка на обсуждение3

Подписка на раздел99

Вам это нравится? Поделитесь в социальных сетях!

687

5

0

28 апреля 2020 г. 0:47
Ответ был помечен как решение.

Вопрос закрыт, нашел пример в инете)

0

Evgenii Legotckoi → BlinCT
#

28 апреля 2020 г. 12:52

Скинул бы тогда хоть пример кода сюда, а то как обычно

0

R

30 апреля 2020 г. 13:56

якщо потрібно просто кнопку то можна створити файли MyButton.qml з кодом і використовувати як зазвичай

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
 
Button {
 
    id: but
    property string text;
    property alias checkable: but.checkable
    property bool visibleBackground: true
    style: ButtonStyle {
        background:  Item {
            Rectangle {
                anchors.fill: parent
                anchors.bottomMargin: control.pressed ? 0 : -1
                color: "#10000000"
                //radius: baserect.radius
            }
            Rectangle {
                id: baserect
                gradient: Gradient {
                    GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor2") : styleUser.value("ButtonGradientColor1") ; position: 0}
                    GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor1") : styleUser.value("ButtonGradientColor2") ; position: control.pressed ? 0.1: 1}
                }
                radius: 0
                visible: but.visibleBackground
                anchors.fill: parent
                border.color: control.activeFocus ? styleUser.value("ButtonBorderColor") : styleUser.value("ButtonBorderActiveFocusColor")
                Rectangle {
                    anchors.fill: parent
                    //radius: parent.radius
                    color: control.activeFocus ? "#47b" : styleUser.value("ButtonActiveFocus")
                    opacity: control.hovered || control.activeFocus ? 0.1 : 0
                    Behavior on opacity {NumberAnimation{ duration: 100 }}
                }
                Rectangle {
                    anchors.fill: parent
                    color: "#d4d4d4"
                    opacity: control.enabled ? 0 : 0.3
 
                }
            }
            Image {
                id: imageItem
                visible: control.menu !== null
                source: styleUser.urlStyle() + "arrow-down.png"
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: padding.right
                opacity: control.enabled ? 0.6 : 0.5
            }
        }
        label: Text {
            text: but.text
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            color: styleUser.value("ButtonTextColor")
        }
 
 
    }
}

0

1

0

R

30 апреля 2020 г. 14:37

і другий варіант це через власний стиль
одразу коротке пояснення в файлах вказано значення типу styleUser.value("ButtonActiveFocus") це тому що в нас дані стилю беруться з файлу і просто не хотілось переписувати, так як код з проекту взятий

для цього потрідно в main.cpp додати

    QQuickStyle::setStyle(":/MyStyle");
    QQuickStyle::setFallbackStyle("Default");

створити файл qtquickcontrols2.conf

[Controls]
Style=MyStyle
 
[Material]
Primary=#41cd52
Accent=#41cd52
Theme=System

далі в папці потрібно створити папку MyStyle
в які будуть файли стилю на різні компоненти в тому числі і Button.qml (можна взяти їх перекопіювати з базових стилів)

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T
 
T.Button {
    id: control
 
    contentItem: Label {
        text: control.text
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        color: styleUser.value("ButtonTextColor")
    }
 
    background:  Item {
        Rectangle {
            anchors.fill: parent
            anchors.bottomMargin: control.pressed ? 0 : -1
            color: "#10000000"
            //radius: baserect.radius
        }
        Rectangle {
            id: baserect
            gradient: Gradient {
                GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor2") : styleUser.value("ButtonGradientColor1") ; position: 0}
                GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor1") : styleUser.value("ButtonGradientColor2") ; position: control.pressed ? 0.1: 1}
            }
            radius: 0
            anchors.fill: parent
            border.color: control.activeFocus ? styleUser.value("ButtonBorderColor") : styleUser.value("ButtonBorderActiveFocusColor")
            Rectangle {
                anchors.fill: parent
                //radius: parent.radius
                color: control.activeFocus ? "#47b" : styleUser.value("ButtonActiveFocus")
                opacity: control.hovered || control.activeFocus ? 0.1 : 0
                Behavior on opacity {NumberAnimation{ duration: 100 }}
            }
            Rectangle {
                anchors.fill: parent
                //radius: parent.radius
                //color: control.enabled ? "#47b" : styleUser.value("ButtonActiveFocus")
                color: "#d4d4d4"
                opacity: control.enabled ? 0 : 0.3
               // Behavior on opacity {NumberAnimation{ duration: 100 }}
            }
        }
    }
}

0

1

0

BlinCT → Evgenii Legotckoi
#

30 апреля 2020 г. 14:53

Сорян, забыл кинуть то что примерно хотел получить в реализации

Button
{
    id: control
    text: qsTr("Button")
 
    property string label: ""
    property alias rectWidth: rectSize.implicitWidth
    property alias rectHeight: rectSize.implicitHeight
 
    contentItem: Text {
        text: control.label
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#FA8072" : "#000000"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }
 
    background: Rectangle {
        id: rectSize
        implicitWidth: 100
        implicitHeight: 96
//        opacity: enabled ? 1 : 0.3
//        anchors.fill: parent
        color: "#666666"
//        border.color: control.down ? "#FA8072" : "#696969"
        border.width: 1
//        radius: 4
    }
 
    Rectangle
    {
        id: rectUp
 
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
 
        height: 10
 
        color: "#101010"
    }
 
    Rectangle
    {
        id: rectDown
 
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
 
        height: 10
 
        color: "#222222"
    }
}

0

1

0

Кастомный баттон qml со своими стилями

Рекомендуем хостинг TIMEWEB

Комментарии

Actions