qml: Demo ChainModel with a list view

Author: promag

src/Makefile.qt.include

@@ -304,6 +304,7 @@ QML_QRC_CPP = qml/qrc_bitcoin.cpp
 QML_QRC = qml/bitcoin_qml.qrc
 QML_RES_QML = \
   qml/components/BlockCounter.qml \
+  qml/components/BlocksListView.qml \
   qml/components/ConnectionOptions.qml \
   qml/controls/OptionButton.qml \
   qml/pages/initerrormessage.qml \

src/qml/bitcoin_qml.qrc

@@ -1,6 +1,7 @@
 <!DOCTYPE RCC><RCC version="1.0">
     <qresource prefix="/qml">
         <file>controls/OptionButton.qml</file>
+        <file>components/BlocksListView.qml</file>
         <file>components/BlockCounter.qml</file>
         <file>components/ConnectionOptions.qml</file>
         <file>pages/initerrormessage.qml</file>

src/qml/components/BlocksListView.qml

@@ -0,0 +1,45 @@
+// Copyright (c) 2021 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import BitcoinCore 1.0
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.11
+import "../controls"
+
+ListView {
+    spacing: 15
+    model: ChainModel {
+    }
+    delegate: ItemDelegate {
+        id: delegate
+        padding: 15
+        background: Rectangle {
+            border.width: 1
+            border.color: delegate.hovered ? "white" : "#999999"
+            radius: 10
+            color: "transparent"
+        }
+        contentItem: ColumnLayout {
+            spacing: 3
+            Label {
+                color: "white"
+                font.family: "Inter"
+                font.styleName: "Regular"
+                font.pixelSize: 28
+                text: qsTrId('Block #%1').arg(blockHeight)
+            }
+            Label {
+                Layout.fillWidth: true
+                Layout.preferredWidth: 0
+                color: "white"
+                elide: Text.ElideRight
+                font.family: "Inter"
+                font.styleName: "Regular"
+                font.pixelSize: 13
+                text: blockHash
+            }
+        }
+    }
+}

src/qml/pages/stub.qml

@@ -22,23 +22,31 @@ ApplicationWindow {
         id: loader
         active: initExecutor.ready
         anchors.centerIn: parent
-        sourceComponent: ColumnLayout {
+        sourceComponent: RowLayout {
             spacing: 15
-            width: 400
-            NodeModel {
-                id: node_model
+            ColumnLayout {
+                spacing: 15
+                Layout.preferredWidth: 400
+                NodeModel {
+                    id: nodeModel
+                }
+                Image {
+                    Layout.alignment: Qt.AlignCenter
+                    source: "image://images/app"
+                    sourceSize.width: 64
+                    sourceSize.height: 64
+                }
+                BlockCounter {
+                    Layout.alignment: Qt.AlignCenter
+                    blockHeight: nodeModel.blockTipHeight
+                }
+                ConnectionOptions {
+                }
             }
-            Image {
-                Layout.alignment: Qt.AlignCenter
-                source: "image://images/app"
-                sourceSize.width: 64
-                sourceSize.height: 64
-            }
-            BlockCounter {
-                Layout.alignment: Qt.AlignCenter
-                blockHeight: nodeModel.blockTipHeight
-            }
-            ConnectionOptions {
+            BlocksListView {
+                Layout.fillHeight: true
+                Layout.preferredHeight: 0
+                Layout.preferredWidth: 300
             }
         }
     }