Wrappinglayout

出自OpenFace

<wrappinglayout>

A layout for arranging siblings in multiple lines. JavaScript: wrappinglayout

Extends Layout wrappinglayout extends LzLayout, and is therefore responsible for arranging all of the subviews for the view that it is attached to. wrappinglayout affects the position of its sibling views, in rows or columns depending on the axis specified.

wrappinglayout places the first subview at the top-left corner, then the next view will be placed to the right (if axis="x") or below (if axis="y"). The layout continues placing views along the axis until a view overlaps the width or height of the containing view, then the layout will begin placing views at the next row or column.

Example 1. wrapping layout to position identical views

<canvas height="100">
 <view width="200" bgcolor="silver">
   <wrappinglayout axis="x" spacing="10"/>
   <view bgcolor="blue" height="30" width="50"/>
   <view bgcolor="blue" height="30" width="50"/>
   <view bgcolor="blue" height="30" width="50"/>
   <view bgcolor="blue" height="30" width="50"/>
   <view bgcolor="blue" height="30" width="50"/>
 </view>
</canvas>

The following example shows how the layout of views is dynamically recalculated when the size of the container view changes. The contained views have been given different shapes and colors to make it easier for you to follow how they're rearranged.

Example 2. Using wrappinglayout with <resizestate>

<canvas height="100">
 <view width="200" bgcolor="silver" onmousedown="rs.apply()" onmouseup="rs.remove()">
   <resizestate name="rs"/>
   <wrappinglayout axis="x" spacing="10"/>
   <view bgcolor="blue" height="30" width="50"/>
   <view bgcolor="red" height="10" width="50"/>
   <view bgcolor="green" height="40" width="50"/>
   <view bgcolor="yellow" height="20" width="50"/>
   <view bgcolor="teal" height="30" width="50"/>
 </view>
 <text y="${canvas.height-this.height}">
   Resize the gray view with your mouse to see dynamic layout.
 </text>
</canvas>

Attributes

Name 　　　Usage　　　 Type(Tag)　　　 Type(JS)　　　 Default　　　 Category

axis 　　　Tag & JS　　 string 　　　　String　　　　　 x　　　　　　 setter

　　　　　The primary axis for wrapping.

spacing 　Tag & JS 　　expression　　 any 　　　　　　　1 　　　　　　　setter

　　　　　A pixel amount to use between the views controlled by the layout in both axes. By default, both xspacing and yspacing are set to this value.

xinset 　Tag & JS 　　　expression　　 any 　　　　　　　0　　　　　　　 setter 　　　　　A pixel amount to offset the first view controlled by the layout in x axis

xspacing 　Tag & JS 　　expression 　　any 　　　　　　　　　　　　　　　　setter

　　　　　A pixel amount to use between the views controlled by the layout in the x axis.

yinset 　　Tag & JS　　 expression　　 any 　　　　　　0 　　　　　　　　　　setter

　　　　A pixel amount to offset the first view controlled by the layout in y axis

yspacing 　Tag & JS 　　expression 　　any 　　　　　　　　　　　　　　　　　setter

　　　　A pixel amount to use between the views controlled by the layout in the y axis.

Attributes inherited from Node

id, name, parent, subnodes

Methods

update()

wrappinglayout.update() This method is usually called automatically when any of the views controlled by the layout change their size , or when the size of layout's immediateparent changes. However it can be called directly to force the layout to update

Methods inherited from LzNode

getAttribute, setAttribute,applyConstraint

Events

Events inherited from LzNode

ondata, oninit