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
Solved
Mobile and Embedded
-
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.
-
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.