Book Image

Application Development with Qt Creator - Second Edition

Book Image

Application Development with Qt Creator - Second Edition

Overview of this book

Table of Contents (20 chapters)
Application Development with Qt Creator Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Putting it all together – an image gallery application


Let's apply what we've discussed in the last few chapters by putting together a simple image gallery application, such as the photo gallery on smartphones. We'll display images from the system's directory in a grid, letting the user flick to scroll the images. Here's how our application will look:

To do this, we need the following components:

  • A model containing the paths to the images to be displayed

  • A controller responsible for creating the model

  • An image provider that can load the images from the system's image directory

  • The QML UI

Let's take a look at the application's QML first:

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
  visible: true
  width: 1080 / 2
  height: 1920 / 2

  Item {
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    clip: true

    GridView {
      id: grid
      anchors.fill: parent;
      cellHeight: 190
      cellWidth: 250
    ...