In the previous stories we shown the main difference between the QML and SwiftUI, both are declarative, QML has a lot of components becuase is more older but also becuase it used on a lot of platforms. Honestly (also if i like Qt) build a mobile application with Qt having the native look&feel sometime can require a bit of work, i want consider in this moment only the GUI side (i know that i can reuse the base code also for other platform). For this topic and for the people that prefer Qt how cross-platform tool i suggest a solution created on Qt: Felgo. I’m not Felgo employe! I would show an example, take the code from previous story (remove current item with right swipe action). List, with right swipe action, in swift:
struct People: Identifiable { var id = UUID() var name: String var image: String }struct ContentView: View { @State var peoples = [People(name:"Albert", image: "albert.png"), People(name: "Tom", image: "tom.png"),People(name: "Jeff", image:"jeff.png"),People(name: "Jennifer",image: "jennifer.png"), People(name: "Steve", image: "steve.png"), People(name: "Bob", image: "bob.png")] var body: some View { List { ForEach(peoples, id: \.id) { people in HStack { Text(people.name) Image(people.image) } } .onDelete { (indexSet) in self.peoples.remove(atOffsets: indexSet) } } } }
In pure Qt
ListView { id: listView anchors.fill: parent model: ListModel { ListElement { img: "bob.png"; name: "Bob" } ListElement { img: "jennifer.png"; name: "Jennifer" } ListElement { img: "tom.png"; name: "Tom" } ListElement { img: "denise.png"; name: "Denise" } } delegate: SwipeDelegate { id: swipeDelegate text: model.name width: parent.width ListView.onRemove: SequentialAnimation { PropertyAction { target: swipeDelegate property: "ListView.delayRemove" value: true } NumberAnimation { target: swipeDelegate property: "height" to: 0 easing.type: Easing.InOutQuad } PropertyAction { target: swipeDelegate property: "ListView.delayRemove" value: false } } contentItem: Item { RowLayout { Text { text: swipeDelegate.text font: swipeDelegate.font elide: Text.ElideRight visible: swipeDelegate.text horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } Image { source: model.img visible: swipeDelegate.text horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } } } swipe.right: Label { id: deleteLabel text: qsTr("Delete") color: "white" verticalAlignment: Label.AlignVCenter padding: 12 height: parent.height anchors.right: parent.right SwipeDelegate.onClicked: listView.model.remove(index) background: Rectangle { color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato" } } } }
Now with Felgo
AppListView { id: listView anchors.fill: parent model: ListModel { ListElement { img: "bob.png"; name: "Bob" } ListElement { img: "jennifer.png"; name: "Jennifer" } ListElement { img: "tom.png"; name: "Tom" } ListElement { img: "denise.png"; name: "Denise" } } delegate: SwipeOptionsContainer { id: container SimpleRow { text: modelData.name imageSource: modelData.img } rightOption: IconButton { color: "red" icon: IconType.trash height: row.height onClicked: { listView.model.remove(index) } } }
Using Felgo the number of lines of code are near to that of Swiftui and this code run also on Android!
From my point of view, if you want develop with Qt/QML and you must speed-up Felgo is a must for real project. I presented only the advantage from the GUI side, if we talk about notification, integration with social SSO with Qt prepare you to write a lot of native code and integrate it in your c++. It’s nice and cool from geek side (and i’m) but it’s could not cool from business side.