diff --git a/Chapters/bloc/layout.md b/Chapters/bloc/layout.md index 98486be..13802ab 100644 --- a/Chapters/bloc/layout.md +++ b/Chapters/bloc/layout.md @@ -488,26 +488,16 @@ root openInNewSpace. ### Flow layout - BlFlowLayout -Children need to specify their size. If they use constraint, the last one will hide -previous one. They will fit available space + move to next line if necessary. -Flow will fill all available space in its parent, and parent can be resized to -match the space needed to display all its children. +A flow layout is used when you need to display a multiple children elements next to each others. +A flow layout can diplay the children elements horizontaly or verticaly. +If a flow layout does not have enought place to display the next child element, it will create a new row or column to display the next children. +It works like a text editor, a word is added to the next line when the space is not enought to fit it. -#### Parent definition - -- horizontal -- vertical +There is special display constraint for the children elements: the value is either `inline` or `float`. +By default, all children are `inline`. +In the case of a horizontal flow layout, the height of a line is equal to the maximum height of all inline elements of this line. +If a child element has a display equals to `flow`, the other elements will be placed around it. -#### Child constraints - -- horizontal -- alignCenter -- alignLeft -- alignRight -- vertical -- alignBottom -- alignCenter -- alignTop #### Example @@ -516,22 +506,34 @@ root := BlElement new border: (BlBorder paint: Color red width: 1); background: (Color red alpha: 0.2); layout: BlFlowLayout horizontal; - constraintsDo: [ :c | - c horizontal matchParent . - c vertical fitContent ]. + constraintsDo: [ :c | + c horizontal matchParent. + c vertical matchParent ]; + yourself. + +1 to: 100 do: [ :index | | child | + child := BlElement new + border: (BlBorder paint: Color blue width: 1); + background: (Color blue alpha: 0.2); + margin: (BlInsets all: 5); + addChild: (BlTextElement text: index printString asRopedText); + constraintsDo: [ :c | + c horizontal exact: 20. + c vertical exact: 20. ]; + yourself. + index = 22 ifTrue: [ + child background: Color blue; + size: 50 @ 60; + constraintsDo: [ :c | c flow float ] ]. + index = 60 ifTrue: [ + child background: Color green; + size: 50 @ 60 ]. + root addChild: child + ]. -50 timesRepeat: [ - | elt | - elt := BlElement new - size: 40 @ 80; - border: (BlBorder paint: Color blue width: 1); - background: (Color blue alpha: 0.2); - margin: (BlInsets all: 5). - root addChild: elt ]. +root openInNewSpace. ``` -![Flow layout.](figures/flowlayout.png width=70) - ### Grid layout - BlGridLayout Elements are disposed in a grid. An element can span over multiple rows or columns.