Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Displaying custom qmls in a row
Forum Updated to NodeBB v4.3 + New Features

Displaying custom qmls in a row

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 252 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    Abdulmueez
    wrote on last edited by
    #1

    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
    1 Reply Last reply
    0
    • ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by ODБOï
      #2

      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

      1 Reply Last reply
      3

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved