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

Gojir4

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.

dmnc

This post is deleted!

dmnc

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

Gojir4

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
    ListModel{
        id: myModel
        ListElement{number: 123; ip: "1.2.3.4"; status: "Idle"}
        ListElement{number: 456; ip: "5.6.7.8"; status: "Idle"}
        ListElement{number: 789; ip: "9.10.11.12"; status: "Run"}
        ListElement{number: 101; ip: "13.14.15.16"; status: "Idle"}
        ListElement{number: 213; ip: "192.168.1.1"; status: "Run"}
    }

    //List view
    ListView{
        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
            //See https://stackoverflow.com/questions/44889261/changing-background-and-text-color-of-a-itemdelegate
            Component.onCompleted: background.color = (index % 2 == 0 ) ?
                                       Material.background
                                     : Qt.lighter(Material.background, 1.3)

            //Simple row displaying data from model
            Row{
                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.