CODEWITHSUNDEEP
iosqmlqt5qt6
inkfil
inkfil

Reputation: 21

How to get IOS like look and feel in QML Style

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)

enter image description here

this is the look I currently have

enter image description here

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: {// ...}
                                }
                            }
                        }
                        // ...
                    }
                    // ...
                }
                // ...
            }
            // ...
        }
        // ...
    }
    // ...
}

Upvotes: 0

Views: 562

Answers (2)

dorisverria
dorisverria

Reputation: 21

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.sstatic.net/FiWa9.png

Upvotes: 2

Stephen Quan
Stephen Quan

Reputation: 26149

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

Upvotes: 1

Related Questions