Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How create my own button with my own look
Forum Updated to NodeBB v4.3 + New Features

How create my own button with my own look

Scheduled Pinned Locked Moved Unsolved General and Desktop
3 Posts 3 Posters 742 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • billy.NB Offline
    billy.NB Offline
    billy.N
    wrote on last edited by
    #1

    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

    jsulmJ 1 Reply Last reply
    0
    • QjayQ Offline
      QjayQ Offline
      Qjay
      wrote on last edited by
      #2

      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()
          }
      }
      
      1 Reply Last reply
      0
      • billy.NB 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

        jsulmJ Offline
        jsulmJ Offline
        jsulm
        Lifetime Qt Champion
        wrote on last edited by
        #3

        @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.

        https://forum.qt.io/topic/113070/qt-code-of-conduct

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved