Comments (14)
Can confirm the windows issue.
from slint.
forgot to mention that the exact same issue happens with GridLayout
.
from slint.
Thanks for filling a bug.
This is the expected behavior. Layout have maximum and minimum size and are constrained by their contents by default. So if the inside of the layout is fixed, this fixes the size of the all window.
By changing the alignment
property on the layout you can have different result.
What is your expectation with this code?
from slint.
i at least can understand overwriting preferred width, but i expect min-width
to set the minimum width of the window.
from slint.
Hi, I don't see how this would be expected behaviour. I would not expect setting the dimensions of a child object to forcibly turn off resizing of the parent object, I would just expect it make the rectangle 50px by 50px
from slint.
update: the next day some of the behavior has changed.
min width on the window will make it start at that width, but the window can still be resized to be smaller. this does not happen with min height. the contents of the horizontal layout was changed to a for loop instead of hard coded, but changing it back to a hard coded rectangle doesnt change anything.
from slint.
after more testing, ive narrowed it down to this behavior:
the main window has these properties
min-width: 1280px;
preferred-height: 720px;
min-height: 200px;
and a vertical layout.
the effect this has: the window height starts hat 720px and cannot be made smaller than 200px. this is expected. The window width starts at 1280px, but it can also be resized down to 200px. if min-width is omitted, the width is locked at 200px.
the width variables seem completely broken, and this cannot be intended behavior.
from slint.
The problem is that the layout gives a maximum size to the window, and that maximum size is smaller than the minimum. This is the same as writting
export component Test inherits Window {
min-width: 1000px;
max-width: 300px;
}
The current behavior with the winit backend is that you can resize the window between 1000 and 300. Admittedly, it's not great.
But what would you expect from such constraints? Force the minimum size?
I would not expect setting the dimensions of a child object to forcibly turn off resizing of the parent object, I would just expect it make the rectangle 50px by 50px
The layout propagates constrains from the child to the parents. And then it propagates sizes from the parents to the child.
So if there is only one rectangle that is 50x50, that's the constraint on the window and the window can't change size.
from slint.
I also noticed that the window size is violated when using an empty layout.
export component MainWindow inherits Window {
preferred-width: 400px;
preferred-height: 200px;
VerticalLayout {
Text { text: "Text"; } // suprisingly working fine without this line
HorizontalLayout {} // <- this line causing a problem
}
}
Maybe it's not a big deal in the example code, but, for example, it might be in a custom component where children are not mandatory:
component LabeledElement inherits Rectangle {
in property <string> label;
VerticalLayout {
Text { text: root.label; }
HorizontalLayout {
@children
}
}
}
from slint.
In my opinion, it is completely unintuitive and ridiculous for the size constraint of a child to effect the window. The child object is a child. it is meant to sit inside its parent. the expected behavior is for the height and width of the child to affect the child, and for the height and width of the parent to effect the parent. If this is intended behavior, then i believe that this framework is incredibly poorly designed and does not attempt to communicate how its constraints work at all.
even then, this still ignores this issue from my original comment:
If the layout has width: root.width, the window will be wider, but still smaller than it should be and unable to be resized.
attempts to work around this restriction has still lead to issues.
However, it is still so hard for me to believe that this is intended behavior, because this does not happen with vertical height. this only happens with the horizontal width.
from slint.
The documentation might needs clarification, but the constraints propagate from the child to the parent. We try to document it in https://releases.slint.dev/1.6.0/docs/slint/src/language/concepts/layouting and we discussed it in https://slint.dev/blog/changes-to-the-slint-language-part-2
If you don't want this behavior, why use a layout at all? I believe then this does what you want (removed the layout)
export component AppWindow inherits Window {
title: "My App";
background: @linear-gradient(45deg, #000000 0%, #222222 30%, #222222 70%, #000000 100%);
preferred-width: 1280px;
preferred-height: 720px;
Rectangle {
width: 50px;
height: 50px;
background: blue;
}
}
How could we improve the docs?
from slint.
By default, they stretch or shrink to take the whole space.
this is literally the exact opposite of both what is happening, and what youre insisting is intended behavior.
from slint.
No matter what angle you look at this from, something doesnt work. If the child is meant to propagate properties to the parent (ignoring that this is the opposite of how a parent-child relationship works) then why does this only affect this one specific example and only with the width of the window?
from slint.
The layout has two roles:
- compute the constraints of things inside it and propagate that to the parent.
- based on the the size of the parent, resize and place the children within it.
These are two different passes. The first pass propagate the constraints from children to parent. The second pass propagates the size down.
In this case, by fixing the width and height of the rectangle, you are saying the Rectangle can only have this one size and cannot be resized. The constraints are passed to the Window which cannot be resized and will have that size.
I'm closing this issue because this is not actionable.
By default, they stretch or shrink to take the whole space.
This is correct, but in that case, the whole space is always 50x50 though, since it is restricted by the constraints you set.
why does this only affect this one specific example and only with the width of the window?
It affect every example where there is a layout in a window.
It has an issue if the minimum is bigger than the maximum though. But I'm not sure anything can be fixed in that regards.
from slint.
Related Issues (20)
- Can't bring global to Rust scope HOT 2
- LinuxKMS: Finish linux framebuffer support
- The button component cannot be displayed in Chinese HOT 4
- Small proposal, hope Slint gets better and better HOT 1
- random svg path preview HOT 4
- (Question) Does the program executable is standalone?
- Multiple component in the interpreter HOT 2
- Document global behavior with several instance of components.
- LLR-based interpreter
- Python: Make `__str__` work for `CompileError`'s `diagnostics` field HOT 2
- The ScrollView has a high CPU load when the scrollbar appears HOT 9
- Chinese characters don't display correctly in some condition. HOT 1
- python's test_timer flacky HOT 1
- The ListView's viewport-width is not working and no horizontal bar HOT 2
- Setting the size of Window on start up does not "stick" HOT 5
- Too many non-local `impl` definition for sp :: FieldOffsets in rust nightly 1.81 HOT 5
- Feature?: Direct support for Qt-Designer (*.ui) files HOT 4
- Interpreter panics if animation properties depends on model HOT 4
- ListView viewport update seems to not "take" immediately HOT 6
- With winit 0.30 on macOS we don't always get a resize event after request_inner_size
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slint.