Unsolved Best way to build this QML 2 Design
-
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.
-
@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 } }
-
@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 } }