Inserting a Spacer or Separator Line Between Components in a FlowLayout or StackLayout

To insert spacing or a line between components in a flowLayout or stackLayout:

In the Design Structure Window of the desired file, expand the flowLayout or stackLayout node, then expand the flowLayout Named Children or stackLayout Named Children node.
In the Component Palette, drag and drop the separator or spacer component from the Layout Components list to the separator node under the flowLayout Named Children or stackLayout Named Children node.
The separator or spacer node is inserted under the expanded separator named child node.
In the Property Inspector, set the appropriate attributes for the spacer or separator component you inserted.
- height - Enter a value for the spacer height. Default is 10.
- width - Enter a value for the spacer width. Default is 10.
- shortDesc - Enter a brief text label for the spacer or separator component.

Note: To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
<pageLayout>
  
  <!-- Arrange child components horizontally -->
  
  <flowLayout> 
    <separator>
      <spacer height="10" width="10"/> 
    </separator>
    <contents> 
      <image/> 
      <image/> 
    </contents> 
  </flowLayout> 
  
  <!-- Arrange child components vertically -->
  
  <stackLayout> 
    <separator>
      <separator/> 
    </separator>
    <contents> 
      <image/> 
      <image/> 
    </contents> 
  </stackLayout> 
  
  <!-- REST OF PAGE LAYOUT -->
  
</pageLayout>
...