how to add the attribute of the id when using the layout of RowLayout?

nicker player


Rectangle {
    id: container
    width: 800
    height: 640
    anchors.margins: 0
    property string global_tips: "Please choose a file"

    signal onActionAddfiles(var data)
    signal onActionRemovefile(var data)
    signal onActionClearfiles(var data)
    signal onActionOk(var data)
    signal onActionCancel(var data)

    function getShortFilepath(len, filepath, filename) {
        let t_filename = filepath + "/" + filename
        let t_result = t_filename
        let t_det = t_filename.length - len
        if (t_det > 0) {
            t_result = filepath.substr(
                        0,
                        t_filename.length - t_det - 3 -filename.length) + "..." + "/" + filename
        }
        return t_result
    }
 
    ListView {
        id: containerListView
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 160
        width: parent.width
        clip: true
        interactive: true

        ScrollBar.vertical: ScrollBar {
            width: 16
            visible: true
        }
        model: ListModel {
            id: modelData
            ListElement {

                linename: "newfiles.xls"
                linevalue: ""


                //
            }
            ListElement {
                linename: "123.pdf"
                linevalue: ""
            }
            ListElement {
                linename: "456.js"
                linevalue: ""
            }
            ListElement {
                linename: "456.js"
                linevalue: ""
            }
        }
        delegate: ItemDelegate {
            id: containerItemDelegate
            width: parent.width
            background: Rectangle {
                implicitWidth: parent.width
                implicitHeight: 20
                opacity: enabled ? 1 : 0.3
                color: (index % 2 == 0) ? "#E0E0E0" : "#f1f1f1"

            }

            contentItem: RowLayout { ////////here is the error code line.
                spacing: 0
                width: parent.width - 20
                height: parent.height
                //
                //Drag.active: rectContent.drag.active
                Drag.source: containerItemDelegate
                Drag.hotSpot {
                    x: width / 2
                    y: height / 2
                }
 

                Rectangle {
                    //id: rectContent
                    width: parent.width - 64
                    height: parent.height
                    //color: "#eeeeee"
                    color: "transparent"
                    Label {
                        text: linename
                        width: parent.width
                        height: parent.height
                        font.bold: false
                        font.pixelSize: 16
                        //color: "#111111"
                        //lineHeight: 28
                        elide: Text.ElideRight
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignLeft
                    }
                }
                Rectangle {
                    //id: rectCtrls
                    width: 64
                    height: parent.height
                    Button {
                        //id: buttonRemove
                        width: parent.width
                        height: parent.height
                        background: Rectangle {
                            implicitWidth: 22
                            implicitHeight: 22
                            opacity: enabled ? 1 : 0.3
                            color: (index % 2 == 0) ? "#E0E0E0" : "#f1f1f1"

                            MouseArea {
                                anchors.fill: parent // 
                                onPressed: {
                                    parent.color = (index % 2
                                                    == 0) ? "#E0E0E1" : "#f1f1f2" // 
                                }
                                onReleased: {
                                    parent.color = (index % 2
                                                    == 0) ? "#E0E0E0" : "#f1f1f1" // 
                                }
                                onClicked: {

                                    console.log("mouse area on clicked",index)
                                    modelData.remove(index)
                                }
                            }
                        }
                        text: ""

                        Image {
                            //id: btnImageCur
                            source: "plugin_filelist_remove.svg"
                            width: 24
                            height: 24
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: parent.left
                            anchors.leftMargin: 10
                        }

                        onClicked: {
                            console.log("button on clicked",index)

                        }
                    }
                }
            }
        }
    }

    Rectangle {
        width: parent.width
        height: 160
        anchors.top: containerListView.bottom
        //anchors.left: parent.left
        anchors.horizontalCenter: parent.horizontalCenter
        color: "#989898"

        Label {
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.topMargin: 12
            text: global_tips
        }
  
    }
}

when i used the code above ,i just failed to add the id in the RowLayout.the same as the child component in the RowLayout. so how to solve this problem?

Harsha P · 5 Dec 2025, 05:26

When using RowLayout or any Layout like ColumnLayout, GridLayout, etc. child items must use Layout.preferredWidth, Layout.fillWidth, or similar Layout. properties. try this

        contentItem: RowLayout {
                    id:_rowLayout
                    spacing: 0
                    width: parent.width - 20
                    height: parent.height
                    //
                    //Drag.active: rectContent.drag.active
                    Drag.source: containerItemDelegate
                    Drag.hotSpot {
                        x: width / 2
                        y: height / 2
                    }


                    Rectangle {
                        id: rectContent
                        Layout.preferredWidth: parent.width - 64
                        Layout.fillHeight: true
                        //color: "#eeeeee"
                        color: "transparent"
                        Label {
                            text: linename
                            width: parent.width
                            height: parent.height
                            font.bold: false
                            font.pixelSize: 16
                            //color: "#111111"
                            //lineHeight: 28
                            elide: Text.ElideRight
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                        }
                    }
                    Rectangle {
                        id: rectCtrls
                        Layout.preferredWidth: 64
                        Layout.fillHeight: true

                        Button {
                            id: buttonRemove
                            width: parent.width
                            height: parent.height
                            background: Rectangle {
                                implicitWidth: 22
                                implicitHeight: 22
                                opacity: enabled ? 1 : 0.3
                                color: (index % 2 == 0) ? "#E0E0E0" : "#f1f1f1"

                                MouseArea {
                                    anchors.fill: parent //
                                    onPressed: {
                                        parent.color = (index % 2
                                                        == 0) ? "#E0E0E1" : "#f1f1f2" //
                                    }
                                    onReleased: {
                                        parent.color = (index % 2
                                                        == 0) ? "#E0E0E0" : "#f1f1f1" //
                                    }
                                    onClicked: {

                                        console.log("mouse area on clicked",index)
                                        modelData.remove(index)
                                    }
                                }
                            }
                            text: ""

                            Image {
                                id: btnImageCur
                                source: "plugin_filelist_remove.svg"
                                width: 24
                                height: 24
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.left: parent.left
                                anchors.leftMargin: 10
                            }

                            onClicked: {
                                console.log("button on clicked",index)

                            }
                        }
                    }
               }

nicker player

@Harsha-P
In fact,Ive tried what u just mentioned.but if I added the id:property.the ui looks unnormally.I just dont know what should i do.