Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Displaying custom qmls in a row



  • 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


  • 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


Log in to reply