qt - Automatically incrementing unique ID for a QML Component

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

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

Share Improve this question asked Mar 12 at 8:53 Clive N 371 silver badge6 bronze badges

3 I'm not sure exactly what you mean by "increment ID automatically". An 'id' is not a normal property that can manipulated or altered. I'm not sure what you're trying to achieve. Are you wanting something like an array of Sliders that you can index? Maybe a Repeater would help? – JarMan Commented Mar 12 at 14:30
That's very helpful. I thought an 'id' can be manipulated. I'm trying to avoid creating multiple sliders because they are similar but each controls a different function. The question is, if I use a repeater, will each slider be given a unique 'id' automatically? – Clive N Commented Mar 13 at 5:48

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

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)
                }
            }
        }
    }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

qt - Automatically incrementing unique ID for a QML Component - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)