How to get IOS like look and feel in QML Style - ios

Question

I'm trying to port an iPad application from QT 5.12.11 to QT 6.4.2, and I cant get the UI to look as it was before.
this is the look I want with native IOS styled dropdown and feel (which I am getting in Qt 5.12.11)
this is the look I currently have
I have tried import QtQuick.Controls.iOS but still my dropdown doesn't look like native IOS like [https://www.qt.io/blog/qt-quick-controls-2-ios-style]
I have tried import QtQuick.Controls.Material and import QtQuick.Controls.Universal but still my dropdown doesn't look as expected.
My code is as follow:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Rectangle {
Flickable{id: playerEdit
// ...
Rectangle { id: playerEditCanvas
// ...
Column { id: playerEditColumn
// ...
Rectangle { id: playerEditPrimaryDetailsRow
// ...
Column { id: playerEditDemoColumn
// ...
Rectangle { id: playerEditAccount
Text {
text: "account"
anchors.fill: parent
font {
family: "SF UI Display"
styleName: "Light"
pixelSize: 14
}
color: "#0077fe"
verticalAlignment: Text.AlignVCenter
}
ComboBox { id: playerEditAccountField
width: 501
height: 42
anchors.left: playerEditAccountLabel.right
anchors.leftMargin: 1
textRole: "rostername"
model: ListModel { id: playerEditAccountModel
Component.onCompleted: {// ...}
}
}
}
// ...
}
// ...
}
// ...
}
// ...
}
// ...
}
// ...
}

Answer 1

If you want to achieve that same look, you will have to use the Menu from the Qt Quick Labs module: https://doc.qt.io/qt-6/qml-qt-labs-platform-menu.html, which will draw a native picker, like the one you want.
The ComboBox implementation for the iOS style doesn't use a picker, but pops a menu instead, similar to pull-downs in iOS: https://i.stack.imgur.com/FiWa9.png

Answer 2

I think you want Tumbler (see https://doc.qt.io/qt-6/qml-qtquick-controls2-tumbler.html).
In the following example, I customized ComboBox popup replacing it with a customized one based on Tumbler. I added customizations, like hardcoding the position to be relative to my parent Page making relative references to myApp. I also added Cancel and Done buttons based on your screenshot. I am not a native iOS person, so, I am judging the UI/UX based on the screenshots you've supplied.
import QtQuick
import QtQuick.Controls
Page {
id: myApp
AppComboBox {
model: [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
]
}
}
// AppComboBox.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
ComboBox {
id: appComboBox
popup: Popup {
id: popup
y: myApp.height - height
width: myApp.width
height: myApp.height / 2
padding: 0
background: Rectangle { color: "#eee" }
ColumnLayout {
anchors.fill: parent
spacing: 0
Frame {
Layout.fillWidth: true
background: Rectangle {
color: "#ddd"
border.color: "#aaa"
}
padding: 1
RowLayout {
width: parent.width
Button {
text: qsTr("Cancel")
palette.buttonText: "#08f"
onClicked: popup.close()
}
Button {
Layout.alignment: Qt.AlignRight
palette.buttonText: "#08f"
text: qsTr("Done")
onClicked: {
appComboBox.currentIndex = tumbler.currentIndex;
popup.close()
}
}
}
}
Frame {
Layout.fillWidth: true
Layout.fillHeight: true
padding: 1
Tumbler {
id: tumbler
anchors.fill: parent
model: appComboBox.model
currentIndex: appComboBox.currentIndex
}
}
}
}
}
You can Try it Online!
You may also want to check out what's Qt Quick Controls 2: iOS Style in Qt6.4 - https://www.qt.io/blog/qt-quick-controls-2-ios-style