Best way to build this QML 2 Design

eragon

It seems there are many ways to organise the UI in QML (like for example using Layouts). What would be the best way to produce the following design? I will have a video component, surrounding the video component will be images (thin blue rectangles). So one above, one below, one left and one right of the video.

I can think of 3 ways to produce this design, which do you think is correct/best?

Create 1 image that holds all the blue rectangles. Create a video and place it above/ontop of the image.
Create a component, inside of it create 4 images and position them absolutely on the left, top, right and bottom. Create a video and absolutely position that aswell.
Create a RowLayout. Add a row, put the top image in there. Create another row with 3 columns, put the image, video then image in each column. Add a row, put the bottom image in there.

Gojir4

@eragon Hi,
My suggestion is to use a GridLayout. Simpler than putting RowLayout inside ColumnLayout and with the same effect.

Here is an example. Blue rectangles represents images, and the red one is the video component

import QtQuick 2.9
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.2

GridLayout{
    columns: 3
    Rectangle{
        color: "blue"
        width: 50; height: 50
        Layout.row: 0
        Layout.column: 1
        Layout.alignment: Qt.AlignHCenter
    }
    Rectangle{
        color: "blue"
        width: 50; height: 50
        Layout.row: 1
        Layout.column: 0
    }

    Rectangle{
        id: videoPlayer       
        Layout.fillWidth: true
        Layout.fillHeight: true
        color: "red"            
    }

    Rectangle{
        color: "blue"
        width: 50; height: 50
        Layout.row: 1
        Layout.column: 2
    }
    Rectangle{
        color: "blue"
        width: 50; height: 50
        Layout.row: 2
        Layout.column: 1
        Layout.alignment: Qt.AlignHCenter
    }

}

J.Hilk

@eragon in my experience with QML so far, I ended up using anchors (manually set) rather than Layouts.

in this case:

Item{
   id:root

Rectangle{//top rectangle
anchors.top: parent.top
anchors.bottom: video.top
width : video.width
anchors.horizontalCenter: video.horizontalCenter
}

Rectangle{//bottom rectangle
anchors.top: video.bottom
anchors.bottom: parent.bottom
width : video.width
anchors.horizontalCenter: video.horizontalCenter
}

Rectangle{//leftrectangle
anchors.right: video.left
anchors.left: parent.left
height : video.height
anchors.verticalCenter: video.verticalCenter
}

Rectangle{//right rectangle
anchors.right: parent.right
anchors.left: video.right
height : video.height
anchors.verticalCenter: video.verticalCenter
}

Rectangle{//video
id:video
anchors.centerIn: parent

width: someWidth
height: someheight
}

}