Home > Enterprise >  Set text in a label in a listview from a textfield outside listview in qml
Set text in a label in a listview from a textfield outside listview in qml

Time:09-27

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.

CodePudding user response:

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

                        }
                    }
  • Related