Question 360322 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – x/y coordinates don't work in delegate QML Qt6

I am writing code in qt 6, I use the mvc pattern in the rectangle delegate, I specified the x:100 (line 103) property, which was supposed to move the rectangle 100 pixels to the right, this works in qt 5, but in qt6 the position of the rectangle remains unchanged, which is why I am forced to use anchors, and they are not very performant. Why does this problem occur and how to fix it?

ListView {
    id: viewMessage
    width: _writeMes.x + _writeMes.width
    height: 280
    spacing: _page.margin
    model: _messageModel

    delegate: Rectangle {
        height: 40
        width: viewMessage.width-150
        //anchors.left: isMyMessage ? undefined : parent.left
        //anchors.right: isMyMessage ? parent.right : undefined
        x: isMyMessage ? 100 : 0
        radius: 10
        color: isMyMessage ? _page.myMessageColor : _page.serverMessageColor
        property bool isMyMessage: model.sendBy === _ws.myId

        Label {
            x: 10
            color: _page.textColor
            text: 'id: ' + model.sendBy
        }

        Label {
            x: 10
            y: 15
            color: _page.textColor
            text: model.text
        }
    }
}

as an alternative I use anchors, this gives the desired effect at the expense of performance.
I want to repeat it again on qt5 it works.

Tags:

2

Answers


  1. 0

    You need to let the ListView control the delegate position.

    But simplest solution is simple: make delegate an Item, and put the Rectangle etc inside that, positioning them as you wish. Or use Qt.Quick.Controls which offer this functionality directly, I think.

    For ease of seeing what is going on, you can add a border: a Rectangle the which fills the Item and has transparent background and colored border.

    Login or Signup to reply.
  2. 0

    I tried your example in Qt6 and plugging in my sample data (_page, _ws, _messageModel, _writeMes) but, the example worked.

    import QtQuick
import QtQuick.Controls
Page {
    id: _page
    property int margin: 10
    property color myMessageColor: "lightsteelblue"
    property color serverMessageColor: "yellow"
    QtObject {
        id: _ws
        property string myId: "Bill Gates"
    }
    ListModel {
        id: _messageModel
        ListElement {
            sendBy: "Bill Gates"
            text: "Hi Steve"
        }
        ListElement {
            sendBy: "Steve Jobs"
            text: "Hi Bill"
        }
    }
    Rectangle {
        id: _writeMes
        width: 600
        height: 600
    }
    ListView {
        id: viewMessage
        width: _writeMes.x + _writeMes.width
        height: 280
        implicitWidth: width
        implicitHeight: height
        spacing: _page.margin
        model: _messageModel
        delegate: Rectangle {
            height: 40
            width: viewMessage.width-150
            //anchors.left: isMyMessage ? undefined : parent.left
            //anchors.right: isMyMessage ? parent.right : undefined
            x: isMyMessage ? 100 : 0
            radius: 10
            color: isMyMessage ? _page.myMessageColor : _page.serverMessageColor
            property bool isMyMessage: model.sendBy === _ws.myId
            
            Label {
                x: 10
                color: _page.textColor
                text: 'id: ' + model.sendBy
            }
            
            Label {
                x: 10
                y: 15
                color: _page.textColor
                text: model.text 
            }
        }
    }
}

    You can see for yourself

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search