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