Multiple resizable component

[Firemanpl]

how to make a resizabe component which contains verticaly and horiotal parameter and can be implement childrens for eg. rectangles?

ResizableComponent{
orientation: LayoutOrientation.verticaly;
ratios: [0.20,0.30,0.50];
splitter-size: 3px;
splitter-color:#00000
Rectangle{}
Rectangle{}
Rectangle{}
}

[Firemanpl]

This feature has become problematic for me to implement because I need a collection here and somehow forward the parameters of each added element and handle each one, add a splitter in the middle and react to the touch area on each splitter

[Firemanpl]

I am looking on MenuBar and Menu items as example

[ogoffart]

Unfortunately, this might not be possible to have that in a generic way right now because the @children cannot do that. Improved support of @children is tracked in issue #6258

Splitter is also hard to do.
We have an example in our code with 3 widgets here:

slint/tools/lsp/ui/main.slint

Lines 258 to 325 in d6846c3

	property <float> ratio1: 0.5;
	property <float> ratio2: 0.5;
	property <int> widget-count: (properties-widget ? 1 : 0) + (outline-widget ? 1 : 0) + (data-widget ? 1 : 0);
	property <length> splitter-height: 3px;
	property <length> usable-height: self.height - (widget-count - 1) * splitter-height;
	property <float> min-ratio: 3 * ConsoleStyles.header-height / usable-height;
	property <float> effective-ratio1: ratio1.max(min-ratio).min(1 - (widget-count - 1) * min-ratio).max(0);
	property <float> effective-ratio2: ratio2.max(min-ratio).min(1 - (properties-widget ? effective-ratio1 : 0) - min-ratio).max(0);
	if properties-widget: PropertyView {
	y: 0;
	height: widget-count > 1 ? usable-height * effective-ratio1 : parent.height;
	x: right-panel-border.width;
	width: EditorSizeSettings.property-bar-width;
	opacity: preview.preview-is-current ? 1.0 : 0.3;
	enabled: preview.preview-is-current;
	properties-visible <=> root.properties-widget;
	}
	if properties-widget && widget-count > 1: TouchArea {
	y: usable-height * effective-ratio1;
	height: splitter-height;
	x: right-panel-border.width;
	width: EditorSizeSettings.property-bar-width;
	moved => {
	ratio1 = Math.clamp((self.y + self.mouse-y - self.pressed-y) / usable-height, 0, 1);
	}
	mouse-cursor: ns-resize;
	Rectangle {
	background: Palette.border;
	}
	}
	if outline-widget: OutlineView {
	y: properties-widget ? usable-height * effective-ratio1 + splitter-height : 0;
	height: usable-height * (1 - (properties-widget ? effective-ratio1 : 0) - (data-widget ? effective-ratio2 : 0));
	x: right-panel-border.width;
	width: EditorSizeSettings.property-bar-width;
	opacity: preview.preview-is-current ? 1.0 : 0.3;
	enabled: preview.preview-is-current;
	outline <=> root.outline-widget;
	}
	if data-widget && outline-widget: TouchArea {
	y: parent.height - self.height - usable-height * effective-ratio2;
	height: splitter-height;
	x: right-panel-border.width;
	width: EditorSizeSettings.property-bar-width;
	moved => {
	ratio2 = 1 - Math.clamp((self.y + self.mouse-y - self.pressed-y) / usable-height, 0, 1);
	}
	mouse-cursor: ns-resize;
	Rectangle {
	background: Palette.border;
	}
	}
	if data-widget: PreviewDataView {
	y: parent.height - self.height;
	height: usable-height * (outline-widget ? effective-ratio2 : properties-widget ? (1 - effective-ratio1) : 1);
	x: right-panel-border.width;
	width: EditorSizeSettings.property-bar-width;
	data-visible <=> root.data-widget;
	opacity: preview.preview-is-current ? 1.0 : 0.3;
	enabled: preview.preview-is-current;

[Firemanpl]

ok i am new on slint yet but thank you. It will be first more difficult feature in my first app. :)