How to align row components without using anchors.



  • I am facing problem while Creating ListView delegate Row.
    I want to aligning Text Label below Image component,
    I want Image and text center Horizontally/vertically aligned in the parent (which is row) as follows:

    @+-----------------------------+
    | +--------+ |
    | | | |
    | | IMAGE | |
    | | | |
    | +--------+ |
    | |
    | +------------+ |
    | | TEXT LABEL | |
    | +------------+ |
    +-----------------------------+@

    If i use anchors then i am getting errors as:
    @ QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row@

    How to create complex List View Rows with multiple components in it without using anchors?

    Thanks.



  • may be something like:

    @Row {
    Column {
    Image {
    ...
    }
    Text {
    ...
    }
    }
    Column {
    Image {
    ...
    }
    Text {
    ...
    }
    }
    ...
    }@



  • This can be done easily without Row component.

    @
    Item {
    id: delegate
    Item {
    anchors.centerIn: parent.center
    Image {
    id: img
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top
    }

         Text {
             id: txt
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.top: img.bottom
        }
    }
    

    }
    @

    Note: Item can be used as container. It acts like Rectangle but it hasn't visual representation.



  • But how to use this Item (id:delegate) as row with the list view?
    I currently have something like this:
    @
    Component
    {
    id: myDelegate
    Item
    {
    MouseArea
    {
    }

        Row
        {
            Image
            {
            }  
            Text
            {
            }
        }
    }
    

    }

    ListView
    {
    delegate: myDelegate;
    }
    @

    I have tried using "column", but it does not center all the components center horizontally/Vertically.

    One more this, is this an Run-time Error or Warning?
    @QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row@

    Thanks.



  • For my example:
    @
    ListView {
    delegate: Item {
    id: delegate
    Item {
    anchors.centerIn: parent.center
    Image {
    id: img
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top
    }

         Text {
             id: txt
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.top: img.bottom
        }
    }
    

    }
    }
    @

    or
    @
    Component {
    id: myDelegate
    Item {
    id: delegate
    Item {
    anchors.centerIn: parent.center
    Image {
    id: img
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top
    }

         Text {
             id: txt
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.top: img.bottom
        }
    }
    

    }
    }
    @



  • thanks "task_struct', thanks for the explanation.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.