Important: Please read the Qt Code of Conduct -

How to implement this UI effect (just like the Listview of android)for Android in qt ?I tried some classes like QListWidget、QListView,but they seems more suitable for PC

  • 0_1543246170343_20181126231635.png

  • Hi @dmnc,

    You could achieve this with Qt Quick, using QML ListView and Material Style.

    It's more suitable for UI mobile development than Qt Widgets.

  • This post is deleted!

  • @Gojir4 thank you for your reply,I will try it.

  • Hi @dmnc,

    Here is an basic example using QML:

    //file: main.qml
    import QtQuick 2.9
    import QtQuick.Controls 2.2
    import QtQuick.Controls.Material 2.2
    import QtQuick.Layouts 1.3
    ApplicationWindow {
        visible: true
        width: 480
        height: 640
        title: qsTr("Android ListView")
        //Taken from Toolbar documentation
        header: ToolBar {
            RowLayout {
                anchors.fill: parent
                ToolButton {text: qsTr("☰")}
                Label {
                    text: "My Awesome List"
                    elide: Label.ElideRight
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                    Layout.fillWidth: true
                ToolButton {text: qsTr("⋮")}
        //Dummy data model
            id: myModel
            ListElement{number: 123; ip: ""; status: "Idle"}
            ListElement{number: 456; ip: ""; status: "Idle"}
            ListElement{number: 789; ip: ""; status: "Run"}
            ListElement{number: 101; ip: ""; status: "Idle"}
            ListElement{number: 213; ip: ""; status: "Run"}
        //List view
            id: list
            model: myModel
            anchors.fill: parent
            //Item delegate provides the "ripple" effect
            delegate: ItemDelegate{
                width: parent.width
                //Some "hack" for alternating row colors as "Material.background: ..." doens't work
                Component.onCompleted: background.color = (index % 2 == 0 ) ?
                                         : Qt.lighter(Material.background, 1.3)
                //Simple row displaying data from model
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 16
                    Label{width: 25; text: index}
                    Label{width: 50; text: number}
                    Label{width: 100; text: ip}
                    Label{width: 40; text: status}

    Note that to enable the "Material" theme, you need to place the file qtquickcontrols2.conf in the QML resource file (qml.qrc by default), which should already contains main.qml. The "ripple" effect is provided by ItemDelegate.

Log in to reply