QtQuick Layouts with Designer



  • Hello together,

    I know the Qt Widget Designer very good and like it. Now we start develope the user interface with QML. And my target is to use the designer for designing the UI:-)
    But it looks that the functionality is complete different. Have I change my mind or it is impossible to compare this to things?
    I start with a simple Rectangle
    @import QtQuick 2.1
    import QtQuick.Layouts 1.1
    import QtQuick.Controls 1.1

    Rectangle {
    color: "blue"

    }@

    I can set the resolution in the designer.
    Now adding a ColumnLayout and a first button.

    @import QtQuick 2.1
    import QtQuick.Layouts 1.1
    import QtQuick.Controls 1.1

    Rectangle {
    color: "blue"

    ColumnLayout {
    id: columnLayout1
    anchors.fill: parent

     Button {
         id: button1
         x: 49
         y: 75
         text: qsTr("Button")
     }
    

    }

    }@

    Why have I absolute values in the button, I use a layout manager? Is there e refresh button in the designer window? At the moment I switch back to edit and to design to see the correct button position.
    Add a new button, same procedure and the result is:

    @import QtQuick 2.1
    import QtQuick.Layouts 1.1
    import QtQuick.Controls 1.1

    Rectangle {
    color: "blue"

    ColumnLayout {
    id: columnLayout1
    anchors.fill: parent

     Button {
         id: button1
         x: 49
         y: 75
         text: qsTr("Button")
     }
    
     Button {
         id: button2
         x: 35
         y: 370
         text: qsTr("Button")
     }
    

    }

    }@

    I can't rearrange the buttons. I have no layout properties for the components in the layout. And so on.
    At the moment the designer is totally useless.
    Please tell me where is my gap to understand the working of the QML Designer.

    Thanks for any help.



  • Hello, I think the best ways is layout by code. Though it's rather difficult to grasp in the first time; but you can control and adjust layout for your own purpose.



  • The concept is a little bit different from the Widget Designer, since the layouts are normal items.

    The idea is to use the navigator to drag items into/out of a layout and to reorder them in a layout.

    For example you can drag in two buttons.
    Add QtQuickl.Layouts in the import manager (Library/Imports).
    Then select the two buttons and right click.
    Select Layout/Layout in RowLayout in the context menu.

    Now the two buttons are layouted in a RowLayout. You can change the order using the navigator.

    Try to drag in a CheclBox and use the Navigator to add the ChecBox to the layout.

    You can also remove items from any layout using the navigator.

    Basically instead of adding/breaking layouts in the Widget Designer you move items in an out of a layout using the navigator.



  • Thanks for this helpful hint.
    But now I'm not sure what I should use, Layouts or Positioners.
    And I have not complete understand how QML computes the size and position of an item in the visualization tree. Do you know a good tutorial for that?

    thanks a lot



  • [quote author="kortus" date="1396017880"]Thanks for this helpful hint.
    But now I'm not sure what I should use, Layouts or Positioners.
    [/quote]

    This is actually a very good question.
    Generally Positioners are cheaper and work well together with animations.
    Positioners even directly support animations for adding/moving/removing items.

    Layouts on the other side support features people are used to from the Widget worlds. They attach properties like Layout.preferredHeight to their items and support size hints and allow items to expand etc...
    This helps a lot if your layout has to adapt to different languages and platform styles on the desktop.

    [quote author="kortus" date="1396017880"]
    And I have not complete understand how QML computes the size and position of an item in the visualization tree. Do you know a good tutorial for that?
    [/quote]

    I do not really know of any overview, but I can try to give a short summary.

    Position:

    In Qt Quick 2 you can position an item in three ways:

    1. Using absolute coordinates.
    2. Using anchors
    3. Using Positioners/Layoyts

    The choice depends on the use case and also personal preferences.
    The easiest way is to layout items using absolute coordinates, but this does not always work well for different languages and different target platforms.
    Anchors allow to position items relative to other items, like a translated text label or a styled button. This helps a lot. But sometimes it is just easier to use a Row(Layout) or Grid(layout) then to add a lot of anchors.

    For the size of Qt Quick 2 items one can say nearly the same thing.

    You can give items absolute sizes, use anchors or Layouts.
    Note that Layouts do influence the size of their children while Positioners do not. Also most items have an implicit size.
    The implicit size of a Button or Label is determined by the size of the translated text. The implicit size of a Positioner or Layout is determined by its children. But for a Layout it also makes sense to give the Layout an explicit size and to determine the size of the layouts children using size hints.



  • Thanks a lot.
    Can you help me again? I have created the small example (using the designer:-)

    @import QtQuick 2.1
    import QtQuick.Controls 1.1

    Rectangle {
    id: testPage
    visible: true

    width: 640
    height: 480
    color: "transparent"

    Row {
    x: 0
    y: 0

    Rectangle {
    id: rectangle1
    width: 40
    height: 40
    color: "blue"
    }

    Rectangle {
    id: rectangle2
    width: 200
    height: 40
    color: "orange"
    }

    Rectangle {
    id: rectangle3
    width: 40
    height: 40
    color: "green"
    }

    Rectangle {
    id: rectangle4
    width: 40
    height: 40
    color: "red"
    }
    }

    Button {
    id: button1
    x: 8
    y: 75
    text: qsTr("Button")
    onClicked: {
    rectangle3.visible = !rectangle3.visible
    }
    }

    }@

    What I need is to stretch the orange rectangle that the row fills the hole width and when the green rectangle is hidden, this place should be occupied by the orange rectangle.

    With Layouts I have used the Layout.fillWidth: true option and it works. But is this with positioners also possible then I have something to compare:-)



  • I would recommend to use Layouts where it is suitable like here. You can not use anchors inside a row as far as I understand.

    Practically for Layouts just take a look at
    @
    Layout.fillWidth
    Layout.fillHeight
    Layout.preferedWidth
    Layout.preferedHeight
    @

    With these 4 properties you can do all you want.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.