đŸ’ģ
Programming Concept
  • 👨‍đŸ”ŦAbout Me
  • 📗C++ STL Concept 2023
    • 📖STL in CPP ( Part I)
    • 📖STL in CPP ( Part II)
    • 📖STL in CPP ( Part III )
    • 📖STL in CPP ( Part IV )
    • 📖STL in CPP ( Part V )
    • 📖STL in CPP ( Part VI )
    • 📖STL in CPP ( Part VII )
  • âœī¸Pointers in C / C++
    • 📖Pointers in details
  • 📘Strings in CPP 2023
  • 🕞Thread in C++ 2023
  • 📓Smart Pointer in C++ 2023
  • Basic C++ Topics
    • đŸ’ŧType Casting in C++ 2023
  • đŸ’ģAdvanced C++ Programming
    • 🎓Topics (Syllabus)
    • 🧑‍🎓Inheritance and Polymorphism
    • đŸ–Šī¸Exception Handling
    • 🏃Runtime Type Information
    • 📔An Overview of Templates
    • 📡Template in C++
  • đŸ’ģEmbedded Linux
    • đŸ–Ĩī¸Embedded Linux OS
      • Build Yocto Project Step By Step
      • How to install apt-get to the Yocto Project image
      • Installing gcc/g++ toolchain in yocto project
      • Installing GDB in yocto project
      • Installing ssh-server-dropbear for embedded linux in yocto project
      • Add Python To A Build
      • Add Boost To A Build
      • Adding Valgrind To Build
      • How To Add A Custom App To A Yocto Build
      • Raspberry Pi
    • đŸ“ļCommunication Protocols
      • âœī¸Working With I2C using c++
      • 📔SPI Implementation with source code in C++
      • 📓Linux Serial Ports Using C/C++
      • đŸ–ąī¸UART
      • đŸ–¨ī¸Universal GPIO Access
  • 🧑‍đŸ’ģQT QML
    • 📘QT QML Concept 2023
      • Why Qt Framework and QML
      • Sqlite3 for qtquick application
      • How To Install sqlite3 in windows 11 || Windows 10
      • Signals and Slots in Qt QML
      • Working with Signals and Slots in QML
      • Sorting QML ListModels
      • ListView In QML With Section Delegate
      • Registration of custom enum in QML
      • Registering a QML Type as a Singleton object
      • Using enumerations in QML without C ++
      • Registering a Singleton object to use “Static” methods in QML
      • Connecting JavaScript files to other JavaScript files in a Qt / QML project
      • Positioning in Qt QML with anchors
      • TextInput validators in Qt Qml
      • Qt Qml Abstract Item Model using C++
      • Qt QML List Model
      • How to Register your C++ Class as a QML Type
      • Jabra Speaker Connect Qt Project
      • Qt | One article summarizing QObject
  • â–ļī¸QT Concept
    • â„šī¸Icon button
    • đŸ’ģRegister QML Singletone in CP
Powered by GitBook
On this page

Was this helpful?

  1. QT Concept

Icon button

download font and apply on engine

  1. Load font in ApplicationWindow using FontLoader

   FontLoader
    {
        id: fontAwesomeFontLoader
        source: "qrc:/Music/assets/fonts/fontawesome.otf"
    }
  1. Use font via using

Label{
    font.family: fontAwesomeFontLoader.name
}
  1. finally you can use fontAwesome , goto website and search icon and apply unicode via using \ufoue

Label{
    text:"\ufoeu"
    }

Source code for icon button

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.15
Button {
    id: control
    property bool isMirror: false
    property string setIcon : ""
    property string setIconText : ""
    property string setIconColor : "#ffffff"
    property real setIconSize: 25
    property real radius: height /2
    property bool isGlow: false
    property real iconWidth: 28
    property real iconHeight: 28
    property bool roundIcon: false

    implicitHeight: 55
    implicitWidth: 55
    property string iconBackground: "transparent"

    Image{
        z:2
        visible: !roundIcon && !setIconText
        mirror: isMirror
        anchors.centerIn: parent
        source: setIcon
        scale: control.pressed ? 0.9 : 1.0
        Behavior on scale { NumberAnimation { duration: 200; } }
    }

    Image{
        z:2
        visible: roundIcon && !setIconText
        mirror: isMirror
        sourceSize: Qt.size(iconWidth,iconHeight)
        anchors.centerIn: parent
        source: setIcon
        scale: control.pressed ? 0.9 : 1.0
        Behavior on scale { NumberAnimation { duration: 200; } }
    }

    Label
    {
        z:2
        font.family: root.fontAwesomeFontLoader.name // use here font loader id name 
        anchors.centerIn: parent
        text: setIconText
        color: setIconColor
        visible: setIconText
        font.pixelSize: setIconSize
    }

    background: Rectangle {
        z:1
        anchors.fill: parent
        radius: control.radius
        color: control.iconBackground
        visible: true
        Behavior on color {
            ColorAnimation {
                duration: 200;
                easing.type: Easing.Linear;
            }
        }

        Rectangle {
            id: indicator
            property int mx
            property int my
            x: mx - width / 2
            y: my - height / 2
            height: width
            radius: width / 2
            color: isGlow ? Qt.lighter("#29BEB6") : Qt.lighter("#B8FF01")
        }
    }

    Rectangle {
        id: mask
        radius: height /2
        anchors.fill: parent
        visible: false
    }

    OpacityMask {
        anchors.fill: background
        source: background
        maskSource: mask
    }

    MouseArea {
        id: mouseArea
        hoverEnabled: true
        acceptedButtons: Qt.NoButton
        cursorShape: Qt.PointingHandCursor
        anchors.fill: parent
    }

    ParallelAnimation {
        id: anim
        NumberAnimation {
            target: indicator
            property: 'width'
            from: 0
            to: control.width * 1.5
            duration: 200
        }
        NumberAnimation {
            target: indicator;
            property: 'opacity'
            from: 0.9
            to: 0
            duration: 200
        }
    }

    onPressed: {
        indicator.mx = mouseArea.mouseX
        indicator.my = mouseArea.mouseY
        anim.restart();
    }
}

Note : apply height and width with radius , you can also apply free icon size and also apply iconWidth and iconHeight with roundicon:true

Note : how to use in code

RowLayout{
                spacing: 2
                IconButton{
                    implicitHeight: 45
                    implicitWidth: 45
                    roundIcon: true
                    iconHeight: 42
                    iconWidth: 42
                    setIcon: Theme.isDarkMode ? "qrc:/Icons/bluetooth.svg" : "qrc:/Icons/black/bluetooth.svg"
                }

                IconButton{
                    setIconSize: 22
                    implicitHeight: 42
                    implicitWidth: 42
                    iconBackground: "transparent"
                    setIconColor : Theme.fontColor
                    setIconText: "\uf3c5"
                }

                IconButton{
                    implicitHeight: 45
                    implicitWidth: 45
                    roundIcon: true
                    iconHeight: 42
                    iconWidth: 42
                    setIcon: Theme.isDarkMode ? "qrc:/Icons/cell signal.svg" : "qrc:/Icons/black/cell signal.svg"
                }
            }
PreviousQt | One article summarizing QObjectNextRegister QML Singletone in CP

Last updated 1 year ago

Was this helpful?

â–ļī¸
â„šī¸
Page cover image