Hi. I'm Jesper Pedersen from KDAB. This might be your very first video with us.
I'll bet you. And, of course, if you're one of the returning visitors, thank you very much for continuing watching us. But if you are new, I'll bet you the reason why you got here is that you googled "binding loop.
" It is like a curse in QML. You get this binding loop and wonder what is going on? !
And, of course, you start googling. Hopefully one day, this video will hit it above Stack Overflow because, in just five minutes, I will introduce you to exactly what's going on. Let's look into the example.
It looks pretty ok, doesn't it? We got a rectangle that's black. You can see a bit of the black pixels here.
We got an image that comes out of this vertical gradient. That's what we have here. Its margin is 5 pixels.
That's why we see a bit of the black rectangle here. And it fills the parent. What's going on over here?
Why are there no pixels between the black line and the edge of my of my window here? Well, let me show you. I take it here and resize it.
There it is -- that dreadful, dreadful binding loop detected for property width and for property height. What's going on? !
Well, let's read the code in a bit more detail. It goes like this: The black rectangle's width should be the child's width; its height should be the child's height. Okay, that's fair enough.
The rectangle should be just big enough to to have the child in there. But when When I look at my child, it says it should fill its parent. So this is what the QML engine will see when it's trying to figure out what width and height to give to this element.
"Hey, Mr Rectangle, can you please tell me what width you'd like to have? " "Oh, hi, yeah. I would like to have the width of my child.
" "Fair enough. Hey child, can you please tell me what width you would like to be? " "Oh yeah, I'm sure I would like a width so I fill exactly my parent.
" "Hey rectangle, what? Wait a minute! Didn't I talk to you just a minute ago?
" And there's your binding loop. To solve this binding loop, what we really need to do is not use width and height. We need to use implicit width and implicit height.
If you come from a widgets background, you will know that this is called size hint. This is: what would you like to be? Not what are you, but what would you like to be?
And that's what we really want to ask our rectangle. Which size would you like me to give you? I would like my implicit width to be whatever and my implicit height to be whatever.
So, let's see if that works now. "Hey, dear rectangle, what size would you like to be? " "Well, I would like to be the size of my child.
" "Cool! Hey, child, what size would you like to be? " "Well, I'd like to be big enough to fill my parent.
" "Hey, parent. . .
" -- we still have that binding loop. So, what I really need is to say that the rectangle's implicit width should be the child's implicit width. It goes like this: "Hey rectangle what size would you like?
" "Well, I'd like the size to be what my child's size would like? " "Okay! Hi, child, what size would you like?
" "Well, I would like to be the size of my image. " So, it's not returning its width, it's returning the width of the image. So, the implicit width and the width are now two different things.
And the implicit width is however big that image is. Let's say 300 pixels. And it will say 300.
And then back to the parent, "what size would you like to be? " "Well, as I said, my child is 300; 300 is fine with me. " Okay!
Now we're in business. And then the QML engine will go to the rectangle and say, "Hey, by my genius, I came up with the idea that you should be 300 pixels wide. " And the rectangle says, "Okay.
I'm 300 pixels wide. " Now, the binding loop down here at anchor. fill makes the child say, "Okay.
My parent's width and height (whatever) changed. So, I better fill them. " And we do not have that binding loop anymore.
And if I run it, we'll see down here no binding loop. And the color is all the way to the edge. Why wasn't it all the way to the edge before?
Well, because QML didn't give up and just segmentation fault. It tried its very best, but realized it has a binding loop. So, it was actually one value behind in the calculation.
If you're not entirely sure you understand what's going on yet, it might be time for you to go in the description under this video and follow the link to the video where I'm talking about by property bindings. Because that's exactly what's going on here. A property binding for anchor is really just a property binding on width and height.
So, let me try and write these two lines here with width and height instead. So, it says that the width of this down here should be the parent's width. Well, we have the five pixels of margin on both sides.
So, there we are. For the height, same thing: parent. height - 5*2.
The x should be 5; the y should be 5. If we now go back to the version where it did not say implicit, but said width and height. And it did not say implicit width, but just width.
It did not say implicit height, but height. Then, it's easy to understand, right? "Rectangle, what width do you want?
" "Well, I want my child's width. " "Child, what width do you want? " "Well, I want my parent with -10.
" "Ok, parent, what. . .
" -- and now the the binding loop is obvious, but it's hidden there behind the anchoring that is going on in child. Hopefully, those 5+ minutes help you understand about binding loops. Next time you see a binding loop, all you need to think of is my anchoring is really just updating my width, height, and x and y.
And instead of using width and height, I need implicit width and implicit height. The next video, which is going to be the last one in this module here, will be about colors and gradients. So, stay tuned.
And until then, have a great time!
