FX&MaterialShowroom: Fix [unqualified] accesses in State_Idle

The example uses a custom QML type, `State_Idle`, to handle a series of
lists and their selections.

In particular, `State_Idle` is used to change the state of a string
property of each of those lists that represent the current selection.

This change is done by accessing a `list` element that is supposed to be
implicitly available and that is currently being defined inline when the
relevant list elements are created.

qmllint cannot know that at runtime `list` will be an available property
and thus produces a warning on access.

Generally, this type of accesses is fixed by explicitly passing the
dependency to the relevant element, that can then access it in a way
that qmllint can keep track of.

The subpart of those types that is modified by `State_Idle` is a string.
Passing a string downward would disallow `State_Idle` from changing the
original value, as the binding would only go one-way.

Furthermore, `State_Idle` is used for interacting with multiple types,
for example `ListModels` and `ListMaterial`.
All of those elements don't have a common shape that is known to have
the necessary property available, such that there is no single type that
can be used as the target of the dependency in a way that allows qmllint
to keep track of the accesses.

To help with allowing qmllint to have a defined shape to refer to, a new
custom QML type, `ListSelection` was added, whose only purpose is to
define a shape that contains the relevant property.

`State_Idle` was modified to work through an instance of that type,
providing a required property so that a reference to the instance can be
passed over and manipulated as required, with a shape that is known to
qmllint.

An instance of the new type was added as the root element of each list type and a
reference to the root element was passed over to the various `State_Idle`
instances that interact with it.

The inline definition of the various `list` property where removed from
the various instances of the relevant list types.

Pick-to: 6.10
Task-number: QTBUG-138170
Change-Id: I294a5c0f9f7175dd3706419d6fa02e7b3ed3cdb7
Reviewed-by: Sami Shalayel <sami.shalayel@qt.io>
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>

examples/demos/FX_Material_Showroom/content/CMakeLists.txt

@@ -35,6 +35,7 @@ qt_add_qml_module(FXMaterialShowroomContent
         Figma_Assets/IconsFunctional.ui.qml
         Figma_Assets/LabelQt.ui.qml
         Figma_Assets/LayoutFull.ui.qml
+        Figma_Assets/ListSelection.qml
         Figma_Assets/ListEffects.ui.qml
         Figma_Assets/ListMaterial.ui.qml
         Figma_Assets/ListModels.ui.qml

examples/demos/FX_Material_Showroom/content/Figma_Assets/ListEffects.ui.qml

@@ -3,12 +3,12 @@
 
 import QtQuick
 
-Item {
+ListSelection {
     id: listEffects
     width: 580
     height: 1050
 
-    property string selection: "None"
+    selection: "None"
 
     State_Idle {
         id: none
@@ -18,6 +18,7 @@ Item {
         height: 88
         item_nameText: "None"
         checkboxImagesState: "state_type_Effects_Number_8"
+        selection: listEffects
     }
 
     State_Idle {
@@ -28,6 +29,7 @@ Item {
         height: 88
         item_nameText: "Rain"
         checkboxImagesState: "state_type_Effects_Number_6"
+        selection: listEffects
     }
 
     State_Idle {
@@ -38,6 +40,7 @@ Item {
         height: 88
         item_nameText: "Snow"
         checkboxImagesState: "state_type_Effects_Number_5"
+        selection: listEffects
     }
 
     State_Idle {
@@ -48,6 +51,7 @@ Item {
         height: 88
         item_nameText: "Smoke"
         checkboxImagesState: "state_type_Effects_Number_4"
+        selection: listEffects
     }
 
     State_Idle {
@@ -58,6 +62,7 @@ Item {
         height: 88
         item_nameText: "Heatwave"
         checkboxImagesState: "state_type_Effects_Number_3"
+        selection: listEffects
     }
 
     State_Idle {
@@ -68,6 +73,7 @@ Item {
         height: 88
         item_nameText: "Sparks"
         checkboxImagesState: "state_type_Effects_Number_2"
+        selection: listEffects
     }
 
     State_Idle {
@@ -78,6 +84,7 @@ Item {
         height: 88
         item_nameText: "Flames"
         checkboxImagesState: "state_type_Effects_Number_1"
+        selection: listEffects
     }
 
     State_Idle {
@@ -88,6 +95,7 @@ Item {
         height: 88
         item_nameText: "Dust"
         checkboxImagesState: "state_type_Effects_Number_7"
+        selection: listEffects
     }
 
     State_Idle {
@@ -98,6 +106,7 @@ Item {
         height: 88
         item_nameText: "Clouds"
         checkboxImagesState: "state_type_Effects_Number_9"
+        selection: listEffects
     }
 
     State_Idle {
@@ -108,6 +117,7 @@ Item {
         height: 88
         item_nameText: "Explosion"
         checkboxImagesState: "state_type_Effects_Number_10"
+        selection: listEffects
     }
 
     State_Idle {
@@ -118,6 +128,7 @@ Item {
         height: 88
         item_nameText: "Bubbles"
         checkboxImagesState: "state_type_Effects_Number_11"
+        selection: listEffects
     }
 }
 

examples/demos/FX_Material_Showroom/content/Figma_Assets/ListMaterial.ui.qml

@@ -3,12 +3,13 @@
 
 import QtQuick
 
-Item {
+ListSelection {
     id: listMaterial
     width: 580
     height: 952
     property alias silverBtn: silverBtn
-    property string selection: "Silver"
+
+    selection: "Silver"
 
     State_Idle {
         id: silverBtn
@@ -18,6 +19,7 @@ Item {
         height: 88
         item_nameText: "Silver"
         checkboxImagesState: "state_type_Materials_Number_10"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -28,6 +30,7 @@ Item {
         height: 88
         item_nameText: "Brushed Steel"
         checkboxImagesState: "state_type_Materials_Number_9"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -38,6 +41,7 @@ Item {
         height: 88
         item_nameText: "Copper"
         checkboxImagesState: "state_type_Materials_Number_8"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -48,6 +52,7 @@ Item {
         height: 88
         item_nameText: "Wax"
         checkboxImagesState: "state_type_Materials_Number_7"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -58,6 +63,7 @@ Item {
         height: 88
         item_nameText: "Wood"
         checkboxImagesState: "state_type_Materials_Number_6"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -68,6 +74,7 @@ Item {
         height: 88
         item_nameText: "Stone"
         checkboxImagesState: "state_type_Materials_Number_5"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -78,6 +85,7 @@ Item {
         height: 88
         item_nameText: "Carbon Fiber"
         checkboxImagesState: "state_type_Materials_Number_4"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -88,6 +96,7 @@ Item {
         height: 88
         item_nameText: "Plastic"
         checkboxImagesState: "state_type_Materials_Number_3"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -98,6 +107,7 @@ Item {
         height: 88
         item_nameText: "Fabric"
         checkboxImagesState: "state_type_Materials_Number_2"
+        selection: listMaterial
     }
 
     State_Idle {
@@ -108,6 +118,7 @@ Item {
         height: 88
         item_nameText: "Leather"
         checkboxImagesState: "state_type_Materials_Number_1"
+        selection: listMaterial
     }
 }
 

examples/demos/FX_Material_Showroom/content/Figma_Assets/ListModels.ui.qml

@@ -3,12 +3,13 @@
 
 import QtQuick
 
-Item {
+ListSelection {
     id: listModels
     width: 580
     height: 376
     property alias rabbit: rabbit
-    property string selection: "Dragon"
+
+    selection: "Dragon"
 
     State_Idle {
         id: rabbit
@@ -18,6 +19,7 @@ Item {
         height: 88
         item_nameText: "Rabbit"
         checkboxImagesState: "state_type_3DModel_Number_2"
+        selection: listModels
     }
 
     State_Idle {
@@ -28,6 +30,7 @@ Item {
         height: 88
         item_nameText: "None"
         checkboxImagesState: "state_type_3DModel_Number_1"
+        selection: listModels
     }
 
     State_Idle {
@@ -38,6 +41,7 @@ Item {
         height: 88
         item_nameText: "Dragon"
         checkboxImagesState: "state_type_3DModel_Number_4"
+        selection: listModels
     }
 
     State_Idle {
@@ -48,6 +52,7 @@ Item {
         height: 88
         item_nameText: "Qt material ball"
         checkboxImagesState: "state_type_3DModel_Number_3"
+        selection: listModels
     }
 }
 

examples/demos/FX_Material_Showroom/content/Figma_Assets/ListSelection.qml

@@ -0,0 +1,8 @@
+// Copyright (C) 2025 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    required property string selection
+}

examples/demos/FX_Material_Showroom/content/Figma_Assets/Material_pop_up.ui.qml

@@ -73,7 +73,6 @@ Item {
         width: 580
         height: 636
         visible: false
-        property alias list: listMaterial
     }
 
     ListEffects {
@@ -83,7 +82,6 @@ Item {
         width: 580
         height: 1050
         visible: false
-        property alias list: listEffects
     }
 
     ListModels {
@@ -93,7 +91,6 @@ Item {
         width: 580
         height: 376
         visible: false
-        property alias list: listModels
     }
 
     Rectangle {

examples/demos/FX_Material_Showroom/content/Figma_Assets/State_Idle.ui.qml

@@ -11,6 +11,8 @@ Item {
     property string checkboxImagesState: "state_type_Materials_Number_1"
     property alias item_nameText: item_name.text
 
+    required property ListSelection selection
+
     Rectangle {
         id: bg
         x: 0
@@ -61,7 +63,7 @@ Item {
         y: 30
         width: 28
         height: 28
-        state: list.selection === state_Idle.item_nameText ? "state_name_CheckFilled"
+        state: state_Idle.selection.selection === state_Idle.item_nameText ? "state_name_CheckFilled"
                                                            : "state_name_CheckEmpty"
     }
 
@@ -71,11 +73,11 @@ Item {
         text: qsTr("")
         anchors.fill: parent
         checkable: true
-        checked: list.selection === state_Idle.item_nameText
+        checked: state_Idle.selection.selection === state_Idle.item_nameText
         Connections {
             target: button
             function onClicked() {
-                list.selection = state_Idle.item_nameText
+                state_Idle.selection.selection = state_Idle.item_nameText
             }
         }
     }