Displaying custom qmls in a row

[Abdulmueez]

Hello,
I just started learning qml and stumbled upon a task online which I have been trying to execute, Currently I have a custom qml```
//import QtQuick 2.0

Rectangle {
id:root
property alias text: textName.text
property alias year: textYear.text
property alias rate: textRate.text
property alias source: image.source
signal click
Column{
Image {
id: image
}
Text {
id: textName
color: "white"
text: "Film Name"
}
Text {
id: textYear
color: "white"
text: "Film Year"
}
Text {
id: textRate
color: "white"
text: "Film Rating"
}
MouseArea{
anchors.fill: parent
onClicked: root.clicked
}
}
}

And I also have a layout which I will try to use it in 

import QtQuick 2.0

Rectangle {
id: root
color: "black"
width: screen.width
height: screen.height
Row{
id: row
spacing: 8
RowItem{
id: row1
text: "Movie"
year: "1999"
rate: "*****"
source: "Movie5.jpg"
}

    Image{
        id: image3
        source: "Movie3.jpg"
    }
    Image {
        id: image2
        source: "Movie2.jpg"
    }
Image {
        id: image4
        source: "Movie4.jpg"
    }
    Image{
        id: image5
        source: "Movie5.jpg"
   }
}

}

 The row doesn't display the customLayout in separate columns but does this when I use just an image, I will like to know whether there is something I'm missing. Kindly help out

[LeLev]

hi,
just set the size of your components explicitly and it works.

//RowItem.qml
import QtQuick 2.0
Rectangle {
    id:root
    property alias text: textName.text
    property alias year: textYear.text
    property alias rate: textRate.text
    property alias source: image.source
    signal click
    color: "orange"
    Column{
        anchors.fill: parent

        Image {
            id: image
            fillMode: Image.PreserveAspectFit
            width: root.width
        }
        Text {
            id: textName
            color: "white"
            text: "Film Name"
        }
        Text {
            id: textYear
            color: "white"
            text: "Film Year"
        }
        Text {
            id: textRate
            color: "white"
            text: "Film Rating"
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked: root.clicked
    }
}

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
//import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: root
        color: "black"
        width: screen.width
        height: screen.height

        Row{
            id: row
            spacing: 8
            height: root.height * 0.2
            width: root.width

            RowItem{
                id: row1
                text: "Movie"
                year: "1999"
                rate: "*****"
                source: "stig.jpg"
                height:80
                width: 80
            }

            Rectangle{
                id: image0
                width:80
                height: 80
                color: "red"
            }

            Rectangle{
                id: image2
                width:80
                height: 80
                color: "green"
               // source: "Movie3.jpg"
            }

            Rectangle{
                id: image3
                width:80
                height: 80
                color: "blue"
               // source: "Movie3.jpg"
            }
        }
    }
}

@Abdulmueez said in Displaying custom qmls in a row:

And I also have a layout

see links for "real" layouts
https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html
https://doc.qt.io/qt-5/qml-qtquick-layouts-gridlayout.html
https://doc.qt.io/qt-5/qml-qtquick-layouts-rowlayout.html
https://doc.qt.io/qt-5/qml-qtquick-layouts-columnlayout.html