Time for action – adding button content

The next step is to add text and an icon to the button. We will do this by using another item type called Row, as shown:

Rectangle {
  id: button
  // …
  gradient: Gradient {
    GradientStop { position: 0; color: "#eeeeee" }
    GradientStop { position: 1; color: "#777777" }
  }
  width: buttonContent.width+8
  height: buttonContent.height+8

  Row {
    id: buttonContent
    anchors.centerIn: parent
    spacing: 4

    Image {
        id: buttonIcon
        source: "edit-undo.png"
    }
    Text {
        id: buttonText
        text: "ButtonText"
    }
  }
}

You'll get the following output:

What just happened?

Row is one out of four positioner types (the others being Column, Grid, and Flow) that spreads its children in a horizontal row. It makes it possible to position a series of items without using anchors. Row has a spacing property that dictates how much space to leave between items...