I have a project that uses several slider components each with unique ID. Is it possible to define one Slider and increment ID automatically without having to recreate the Slider Component over and over again? Currently it looks as follows. It contains 3 Sliders with ID's sldRed, sldGreen and sldBlue
Rectangle
{
id: rectPwm
width: 620
height: 300
anchors.left: rectInputs.right
anchors.leftMargin: 10
anchors.top: rectOutputs.bottom
anchors.topMargin: 10
color: "transparent"
border.color: "gray"
border.width: 2
radius: 10
Text
{
text: qsTr("PWM")
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 10
color: "white"
font.family: fontHelvetica.name
font.pointSize: 20
}
Text
{
text: qsTr("R")
anchors.right: sldRed.left
anchors.rightMargin: 30
anchors.verticalCenter: sldRed.verticalCenter
color: "red"
font.family: fontHelvetica.name
font.pointSize: 25
}
Slider
{
id: sldRed
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 80
width: 450
minimum: 0
maximum: 100
value: 0
step: 1
backgroundEmpty: "lightgray"
backgroundFull: "red"
pressCircle: "red"
onValueChanged:
{
pwmRed.setPwmValue(value);
}
}
Text
{
text: sldRed.value
anchors.left: sldRed.right
anchors.leftMargin: 10
anchors.verticalCenter: sldRed.verticalCenter
color: "white"
font.family: fontHelvetica.name
font.pointSize: 25
}
Text
{
text: qsTr("G")
anchors.right: sldGreen.left
anchors.rightMargin: 30
anchors.verticalCenter: sldGreen.verticalCenter
color: "lightgreen"
font.family: fontHelvetica.name
font.pointSize: 25
}
Slider
{
id: sldGreen
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: sldRed.bottom
anchors.topMargin: 70
width: 450
minimum: 0
maximum: 100
value: 0
step: 1
backgroundEmpty: "lightgray"
onValueChanged:
{
pwmGreen.setPwmValue(value);
}
}
Text
{
text: sldGreen.value
anchors.left: sldGreen.right
anchors.leftMargin: 10
anchors.verticalCenter: sldGreen.verticalCenter
color: "white"
font.family: fontHelvetica.name
font.pointSize: 25
}
Text
{
text: qsTr("B")
anchors.right: sldBlue.left
anchors.rightMargin: 30
anchors.verticalCenter: sldBlue.verticalCenter
color: "blue"
font.family: fontHelvetica.name
font.pointSize: 25
}
Slider
{
id: sldBlue
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: sldGreen.bottom
anchors.topMargin: 70
width: 450
minimum: 0
maximum: 100
value: 0
step: 1
backgroundEmpty: "lightgray"
backgroundFull: "blue"
pressCircle: "blue"
onValueChanged:
{
pwmBlue.setPwmValue(value);
}
}
Text
{
text: sldBlue.value
anchors.left: sldBlue.right
anchors.leftMargin: 10
anchors.verticalCenter: sldBlue.verticalCenter
color: "white"
font.family: fontHelvetica.name
font.pointSize: 25
}
}
I used the same ID for all of them
Hello :) I think you have misunderstood some of the concept of how dynamic component creation work for qml. You can't set a specefic ID for dynamicaly created components. But you can identify them by index or some property value they might have.
I have created a minimal example for your case. Please be aware that I commented out some of you code because it would throw errors for me. I hope the example clearifys how you could approach your case.
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.0
Window {
id: root
width: 620
height: 300
visible: true
title: qsTr("SliderExample")
function operateSlider(name) {
switch(name){
case "pwmRed":
console.log("EXECUTE RED")
//pwmRed.setPwmValue(value)
break;
case "pwmGreen":
console.log("EXECUTE GREEN")
//pwmGreen.setPwmValue(value)
break;
case "pwmBlue":
console.log("EXECUTE BLUE")
//pwmBlue.setPwmValue(value)
}
}
// create a model (you could also use a simple JS model)
ListModel {
id: sliderModel
ListElement {
name: qsTr("pwmRed")
sliderText: qsTr("R")
color: "red"
}
ListElement {
name: qsTr("pwmGreen")
sliderText: qsTr("G")
color: "green"
}
ListElement {
name: qsTr("pwmBlue")
sliderText: qsTr("B")
color: "blue"
}
}
Rectangle {
id: rectPwm
width: 620
height: 300
color: "transparent"
border.color: "gray"
border.width: 2
radius: 10
anchors {
leftMargin: 10
//top: rectOutputs.bottom
topMargin: 10
//left: rectInputs.right
}
Text {
text: qsTr("PWM")
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 10
color: "white"
//font.family: fontHelvetica.name
font.pointSize: 20
}
ListView {
id: listView
anchors.verticalCenter: parent.verticalCenter
height: childrenRect.height
width: root.width
model: sliderModel
delegate: Item {
// if you define a required property in a delegate and dont initialize it the delegate will look for the property in the model
// so here the property "name" will take its value from the model same goes for "sliderText" and "color"
required property string name
required property string sliderText
required property string color
height: slider.height
width: parent.width
Text {
id: sliderText
text: parent.sliderText
anchors.rightMargin: 30
anchors.verticalCenter: slider.verticalCenter
color: parent.color
//font.family: fontHelvetica.name
font.pointSize: 25
}
Slider {
id: slider
//anchors.horizontalCenter: parent.horizontalCenter
anchors.left: sliderText.right
//anchors.top: parent.top
anchors.topMargin: 80
width: 450
height: 50
//minimum: 0
//maximum: 100
value: 0
//step: 1
//backgroundEmpty: "lightgray"
//backgroundFull: "red"
//pressCircle: "red"
onValueChanged: root.operateSlider(parent.name)
}
}
}
}
}