How create my own button with my own look

billy.N

hi, coders

i'm beginner and i would like to know how design or create my own buttons
which classes should i use to be able to create my own widgets

Qjay

read this book : qmlbook.github.io

example :

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello World")

    Button {
        id: button
        onClicked: console.log("clicked");
    }

    Circle {
        id: circle
        color: "black"
    }
}

button.qml

import QtQuick 2.5
import QtQuick.Window 2.2

Rectangle{
    id:button
    signal clicked()
    anchors.centerIn: parent
    border{ width: 1 ; color: "black"}
    radius: 5
    color: "transparent"
    
    gradient: Gradient{
        GradientStop { position: 0; color:"#eeeeee"}
        GradientStop { position: 1; color:"#777777"}
    }
    clip:true
    implicitWidth: Math.max(buttoncontent.implicitWidth+8,80)
    implicitHeight:buttoncontent.implicitHeight+8
    
    Row{
        id:buttoncontent
        anchors.centerIn: parent
        spacing: 4
        anchors.verticalCenterOffset:  buttomMouseArea.pressed ? 1 : 0
        anchors.horizontalCenterOffset:   buttomMouseArea.pressed ? 1 : 0

        Image {
            id: buttonicon
            source: "qrc:/arrow.png"
        }
        
        Text {
            id: buttonText
            text: "Button"
            color: buttomMouseArea.containsMouse ? "white" : "black"
            
        }
    }
    MouseArea{
        id: buttomMouseArea
        hoverEnabled: true
        anchors.fill: parent
        onClicked: button.clicked()
    }
}

jsulm

@billy.N Hi!
QML or Widgets? If widgets then you can use QWidget as base class and use any other widgets (QLineEdit, QLabel, ...) to compose your own widgets.