I'm using a square ratio as an example because it is clear to see that the result is wrong, not squared. So the idea was to keep the aspect ratio of the image without a specific number, and use another parent modifier to create the correct size: So the solution my colleague proposed was on the right track: use aspect ratio to compute a "frame" in which to embed the image, and then let the image fill all the space.ĭespite that, my brain was like "there must be a way of doing that by chaining modifiers!". This explains why so many examples provide a frame and not a ratio, which defeats the purpose of dynamic UIs. The aspect ratio modifier is just changing the proposed size that is passed down and the image just renders itself according to that size, filling all pixels on that space, not caring if that results in stretching at all. And again, the just renders itself in that size, nothing else. The aspect ratio modifier does some probing this time to find the correct size that matches the algorithm. Is not that the image is magically avoiding stretching (like UIImageView did), it's that the image receives a proper size that doesn't make it stretch. But if you look at the layout logs, you can see what happens in reality. Now we can see how the image is correctly filling the available space without stretching. Now let's try without giving a ratio at all, just telling the modifier to fill. If we change it to fill the behaviour is the same, with the difference that the sizes are bigger. The image accepts that size and just renders itself in it. You can see how the aspect ratio receives a size, it computes an appropriate size respecting the ratio and passes that down to the image. Let's start with the problematic example: Image( "christmas") Note that I'm just giving a frame of 393x400 to avoid the VStack probing multiple times. And I dig deeper and deeper until I'm satisfied, when I can't come up with more questions that could shake my mental model. This is something I do a lot, even if I think I know how things should work, I want to make sure my mental model is correct. The layout process is quite simple in reality: proposed sizes go down the hierarchy and taken sizes go up doing the positioning with them.Īrmed with some tools from Swift Talk I debugged for a while the behaviour of the modifier to confirm my mental model. That means that it takes part in the layout process of SwiftUI. The aspectRatio modifier is a layout modifier. So don't let your mind complicate things and make you think that you. Nope! We are not setting properties to an object here. It's not like we are telling the Image "object" to respect the aspect ratio. But it seems I was wrong 😑 aspectRatio and the layout processĪs with many modifiers in SwiftUI, it is important to realise that they do not really apply any behaviour to the views. I was sure there was some combination of modifiers that would make it work nicely without ZStack or other hacks.
SCALE IMAGE ON VSTACK CODE
Of course my curious mind immediately jumped into the code to analyse why there wasn't a better solution.
SCALE IMAGE ON VSTACK MANUAL
I want to use aspect ratio, without a numeric ratio and specifying no manual size, and let the image render properly without stretching.īut of course that's now what aspectRatio does! What I would love is for this to behave like UIImageView and it scaled the image properly without stretching. fill) - and using frame or other combinations that solve the issue at hand. The examples about aspectRatio in images are always without the ratio. It's interesting how all the search results you find are giving you the solution to the most trivial example without getting deep into how things work. The problem is that using aspectRatio in an Image and giving it a ratio just stretches the image, making it look awful and making the aspect ratio useless.
While reviewing the PR, I was surprised to see that the old code already was using aspectRatio and the new code was an ugly mess of ZStack and other seemingly unnecessary things. It all started when a colleague made a PR to fix an issue that I raised with an image being distorted. Update: Thanks to Ole Begemann I've learned more about how frame works and updated the ideal solution. It's a surprisingly simple system, but also one that made me wonder why things worked the way they worked. Today I spent a couple of hours understanding how SwiftUI aspectRatio modifiers works and how it interacts with Image.
0 kommentar(er)
