Create QML Button With icon and Without icons
The Video, aims to share the latest updates and developments on Qt Quick, as well as providing tutorials and examples of how to use the model in various applications, providing a platform for the community to share their experiences and insights on working with the model.
#qml #qt #qtquick
Qt Quick UI Project : • Qt QML Modern UI | Learn Qt Quick QML Part 3
Watch This Videos : • Qt QML Modern UI | Learn Qt Quick QML
Qt Ui Designs Project : • Qt QML Modern UI | Learn Qt Quick QML Part 2
import QtQuick 2.15
import QtQuick.Window 2.15
// Lets import some library
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.3
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
// Creating a simple Button in QML
// Add material theme and color:
Material.theme: Material.Dark
Material.accent: Material.Red
Material.primary: Material.Blue
ColumnLayout{
anchors.centerIn: parent
// Let's Create Some Button With icon and Without icon Image
// Simple Button Without Icon
Button{
// create id for accessing button properties
id:myButton // id first letter always should be small
// add button name
text: qsTr("my Button")
// adding some highlighted:
highlighted: true
// add some signal on clicked action
onClicked: {
// Let's Print Something on Button Clicked
console.log("Button Clicked ...!")
}
}
// Adding Button With icon Property
Button{
id:anotherButton
text: qsTr("Icon Button Only")
display: AbstractButton.IconOnly
icon.source: "qrc:/icon.png"
icon.width: 35
icon.height: 35
highlighted: true
onClicked: {
console.log("icon Button Clicked ")
}
}
// Add text with icon Button
Button{
text: qsTr("Text With icon")
display: AbstractButton.TextBesideIcon
icon.source: "qrc:/icon.png"
icon.width: 35
icon.height: 35
highlighted: true
onClicked: {
console.log("Text With icon Button Clicked ")
}
}
//another text with Icon Button
Button{
text: qsTr("Icon Button Only")
display: AbstractButton.TextUnderIcon
icon.source: "qrc:/icon.png"
icon.width: 35
icon.height: 35
highlighted: true
onClicked: {
console.log("Text Under icon Button Clicked ")
}
}
}
}