Time for action – Creating a button component

Start by creating a new project in Qt Creator. Choose Qt Quick Application - Empty as the project template. Name the project custom_button and leave the rest of the options unchanged.

At this point, you should end up with a QML document containing an empty window. Let's start by creating the button frame. Edit the main.qml file to add a new Rectangle item to the window:

import QtQuick 2.9 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Rectangle { id: button anchors.centerIn: parent border { width: 1; color: "black" } radius: 5 width: 100; height: 30 gradient: Gradient { GradientStop { position: 0; color: "#eeeeee" } GradientStop { position: 1; ...

Get Game Programming using Qt 5 Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.