Set text in a label in a listview from a textfield outside listview in qml

Question

I have the following ListView in QML:

ListView{
    id:daylistView
    width:parent.width
    height:parent.height - eventDayLabel.height

    boundsBehavior:Flickable.StopAtBounds
    highlightRangeMode: ListView.StrictlyEnforceRange

    orientation: Qt.Vertical
    anchors.top:eventDateRow.bottom
    clip:true
    focus:true
    model: 24

    currentIndex : calendarMonth.selectedDate.getDate() === new Date().getDate()
                   && calendarMonth.selectedDate.getMonth() === new Date().getMonth()?getHour():12

    interactive: true

    delegate: Item{

            id:hourItem
            property var hourTime:hourweeklistviewLabel
            width: daylistView.width
            height: 60

            MouseArea{
                anchors.fill:parent
                onClicked:{
                    windowLoader.active =true
                    daylistView.currentIndex=index
                }
            }

            Rectangle {
                z:4
               id:hourdaylistviewindexLine
               y:getdayMinute()

               width:hourItem.width
               height:2
               border.color: calendarMonth.selectedDate.getDate()===new Date().getDate()
                             && getHour() === hourweeklistviewLabel.text
                             && calendarMonth.selectedDate.getMonth() === new Date().getMonth()
                             ?"red" : "transparent"

               border.width:1

            }
            Rectangle {
               z:4
               id:hourline
               anchors.verticalCenter: daylistView
               width:daylistView.width
               height:2
               border.color: "lightgray"

               border.width:1

            }

            Label{
               z:4
               id:hourweeklistviewLabel
               anchors.verticalCenter: parent

               text:['00','01','02','03',
                   '04','05','06','07','08','09','10','11','12','13',
                       '14','15','16','17','18','19','20','21','22','23'][index]
               color: getHour() === hourweeklistviewLabel.text
                      && calendarMonth.selectedDate.getDate() === new Date().getDate()
                      && calendarMonth.selectedDate.getDay() === new Date().getDay()
                      ? systemPalette.highlight : "lightgray"

            }
            Label{
                z:4
                id:notesLabel
                anchors.left:hourweeklistviewLabel.right
                //text:" "
            }
        }
      }
    }

It is a day calendar app, where the ListView delegates hourly time.The delegate includes a mouse area , two rectangles and two labels.The one Label is read only.In the other Label, I want to set text from a TextInput, outside ListView, from another window.Far more the objective is to display the label in specific hour time, meaning in a specific row of ListView.Until now I managed to get the currentItem hour, but I can't set the text in the Label in ListView in currentIndex, although I tried a lot of suggested methods I found in the web.If i find a way to set the text in currenItem Label then I could choose to set it, in any other index in Listview.

Your question isn't clear. Are you wanting to set the text on the Label only if it is the currentItem? — JarMan
Just bind something in your delegate to a property you create in ListView body. You should be aware that the ListView will delete and create delegates when you scroll. So your delegates should never save their state themselves and you have to save their states somewhere outside of the delegate. — Soheil Armin
@JarMan Yes , I want to set the text on the Label only if it is the currentItem. — cgiannakidis
Does this do what you want? text: (index === currentIndex) ? "current item" : "not current item" — JarMan
@JarMar No.As I said I want to set the notesLabel.text from a TextInput{text:"Hello "} property outside of ListView. — cgiannakidis

cgiannakidis cgiannakidis · Accepted Answer · 2021-09-26T00:14:27

As @SoheilArmin comment, the solution lies on binding Label text to a property.In the ListView code:

  delegate: Item{

        id:hourItem
        property var hourTime:hourweeklistviewLabel

        **property var notetaking: notesLabel**

        width: daylistView.width
        height: 60

set property var notetaking: notesLabel .

Then in the TextField:

  TextField {
            id:title
            x:50
            y:20
            placeholderText :'Enter Note'
            text:daylistView.currentItem.notetaking.text
        }

set text:daylistView.currentItem.notetaking.text

thus, we have a bidirectional binding . Also define a button so can set the text to the label:

Button {
                        id: button
                        text: qsTr("Add Note")
                        anchors.centerIn:parent

                        onClicked: {
                                 if (title.text !==""){daylistView.currentItem.notetaking.text= title.text}
                                 else{}

                        }
                    }

Set text in a label in a listview from a textfield outside listview in qml

1 Answers