[Interest] Row(Layout), use spacing as resize handle. How to do that?

Saether Jan-Arve Jan-Arve.Saether at digia.com
Thu Feb 27 12:37:57 CET 2014


First, I would consider using SplitView.

If that's not an option, I'm curious why you want to use a layout, and which of its features you want. Specifically, I'm curious to know what behavior you expect when a handle is resized. 
Should it redistribute all items to the left and all items to the right of the handle?
Then, it's really two layouts (one layout on each side of the handle) that you would have to temporarily create and destroy each time a handle is dragged.

It sounds quite complex, and I'm not sure if you want to go that route, since it would involve injecting layouts in the hierarchy, setting temporary implicit sizes on all items to not cause sudden jumps when starting a drag.

At this point I cannot see a clean and simple solution to this, and I don't want to speculate further unless you are really convinced ;)

Jan Arve

> -----Original Message-----
> From: interest-bounces+jan-arve.saether=digia.com at qt-project.org
> [mailto:interest-bounces+jan-arve.saether=digia.com at qt-project.org] On 
> Behalf Of Mark Gaiser
> Sent: 27. februar 2014 03:01
> To: Qt Interest
> Subject: [Interest] Row(Layout), use spacing as resize handle. How to 
> do that?
> Hi,
> 
> It seems like i'm trying to make something that simply isn't possible
> with the currently shipping QtQuick components. So i'm trying to make
> a custom version.
> 
> Take the following example code as base:
> 
> ============================================
> import QtQuick 2.0
> import QtQuick.Layouts 1.1
> 
> RowLayout {
>     width: 800
>     height: 600
>     spacing: 0
>     
>     Rectangle {
>         color: "red"
>         width: 100
>         Layout.fillHeight: true
>     }
>     
>     Rectangle {
>         color: "orange"
>         width: 10
>         Layout.fillHeight: true
>     }
>     
>     Rectangle {
>         Layout.fillWidth: true
>         Layout.fillHeight: true
>         color: "green"
>     }
>     
>     Rectangle {
>         color: "orange"
>         width: 10
>         Layout.fillHeight: true
>     }
>     
>     Rectangle {
>         Layout.fillWidth: true
>         Layout.fillHeight: true
>         color: "blue"
>     }
> }
> ============================================
> 
> This example has no interaction, obviously :)
> 
> What i'm trying to make is use the spacing between elements as resize
> handles. By default (in Row and RowLayout that is not possible since
> it's just a real value setting. It's not a delegate.
> 
> So i have a few different ways in making this. Nether seems to work
> neatly though.
> 
> 1. Use anchors where i anchor elements to the resize handle. This
> isn't very feasible because the resulting code uses lots of anchor
> magic and is just a mess to make easily extendable with more elements.
> Something that is easy for the RowLayout.
> 
> 2. Use RowLayout and add my own "resize handles". Seems like the
> cleanest solution but doesn't work in practice because moving the
> handles (the ones in orange in the example) don't update the RowLayout
> itself.. So nothing besides the handle changes.
> 
> Now i'm searching for a hybrid solution.
> I want to create something with the simplicity of the example provided
> above but with the functionality as if i where using anchors. But i
> don't quite know where to start. Do i need to make a custom QQuickItem
> class? Or do i need to play with some other class? If so, which one(s)?
> 
> Cheers,
> Mark
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest



More information about the Interest mailing list