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
        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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.