QML VS. SwiftUI (part 1)

In this series I’ll show the difference between QML and SwiftUI. Both are declarative language, the first on is part of the Qt cross-platform library, the second is from Apple, introduced in the last summer.

The idea that is at the base of these languages is simplify the design of the GUI, with the dream that the designer can draw the interface with tools as Photoshop, Sketch or gimp and with some plugin have the code in some programming language, for both the languages we have some attempt in this direction. Done this introduction, let’s start to see a bit of code.

// QML TEXT
import QtQuick 2.12
import QtQuick.Window 2.12Window 
{
   title: qsTr("Hello World")   
   Text {     
       id: name     
       text: qsTr("text")     
       anchors.verticalCenter: parent.verticalCenter
       anchors.horizontalCenter: parent.horizontalCenter     
       font.family: "Helvetica [Cronyx]"    
    }
}

In the previous code, we show a the text “text” centered vertically and horizontally in window. To default in QML the object are positioned in the left/top corner.

In SwiftUI we have:

import SwiftUI

struct ContentView: View {
    var body: some View {
           Text("Hello, World!")
           .fontWeight(.bold)
    }
}

In SwiftUI the widgets are showed already centered in the View, so we have not specify the alignment how in QML, but if we want the Text in the left/top corner we must specify:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack{
                Text("Hello, World!")
                .fontWeight(.bold)
                Spacer()
            }
            Spacer()
        }
    }
}

In the HStack (horizontal stack) we have the Text and the Spacer that fill the space not covered from the Text, so the Text is pushed on the left, in dual way for the Vertical Stack (VStack) the Spacer push on top the HStack.

The first visible difference between QML and SwiftUI is how the properties are set for the objects, in QML we have propertyName: value within the {} block of the element, instead in SwiftUI ther properties are set with .property after the {} block (when present).