Добавил кнопку с градиентом

GradientButton.qml

@@ -0,0 +1,32 @@
+import QtQuick 2.0
+import QtQuick.Controls.Material 2.2
+
+Rectangle {
+    id: root
+
+    signal clicked()
+
+    Gradient {
+        id: pressedGradient
+
+        GradientStop {position: 0.0; color: Material.color(Material.Grey, Material.Shade300)}
+        GradientStop {position: 0.5; color: Material.color(Material.BlueGrey, Material.Shade300)}
+        GradientStop {position: 1.0; color: Material.color(Material.Brown, Material.Shade300)}
+    }
+
+    Gradient {
+        id: normalGradient
+
+        GradientStop {position: 0.0; color: Material.color(Material.Grey)}
+        GradientStop {position: 0.5; color: Material.color(Material.BlueGrey)}
+        GradientStop {position: 1.0; color: Material.color(Material.Brown)}
+    }
+
+    MouseArea {
+        id: ma
+
+        anchors.fill: parent
+    }
+
+    gradient: ma.pressed ? pressedGradient : normalGradient
+}

HomeForm.qml

@@ -14,6 +14,7 @@ Page {
 
     ListView {
         anchors.fill: parent
+        anchors.margins: 5
 
         model: lightsModel
         spacing: 5
@@ -23,6 +24,7 @@ Page {
             height: childrenRect.height
 
             title: groupName || ""
+            lights: channels
         }
     }
 }

LightGroup.qml

@@ -5,17 +5,45 @@ Item {
     id: root
 
     property string title: ""
-    property var lights: []
+    property QtObject lights: undefined
 
-    Rectangle {
+    Column {
-        width: parent.width
+        width: root.width
-        height: 20
 
-        color: "green"
+        spacing: 5
 
-        Label {
+        GradientButton {
-            text: root.title
+            width: root.width
-            anchors.centerIn: parent
+            height: 40
+
+            visible: Boolean(root.title)
+            radius: 5
+
+            Label {
+                text: root.title
+                anchors.centerIn: parent
+            }
+        }
+
+        Row {
+            id: buttonsRow
+
+            width: root.width
+            height: childrenRect.height
+
+            spacing: 5
+
+            Repeater {
+                model: root.lights
+
+                width: root.width
+
+                GradientButton {
+                    width: (root.width - buttonsRow.spacing * (root.lights.count - 1)) / root.lights.count
+                    height: width / 2
+                    radius: 5
+                }
+            }
         }
     }
 }

qml.qrc

@@ -8,5 +8,6 @@
         <file>SubtitledItemDelegate.qml</file>
         <file>LightsModel.qml</file>
         <file>LightGroup.qml</file>
+        <file>GradientButton.qml</file>
     </qresource>
 </RCC>

qtquickcontrols2.conf

@@ -7,7 +7,7 @@ Style=Material
 
 [Material]
 Theme=Dark
-Primary=#3C3C3C
+Primary=BlueGrey
-Accent=BlueGrey
+Accent=Grey
 ;Foreground=Brown
 ;Background=Steel