Layout布局上部分
官网原文：https://www.fusetools.com/learn/fuse#layout
布局 Layout
Fuse有一个强大的布局系统（layout system），一次布局可以支持所有平台与移动设备，不管是用原生元素还是基于Graphics的元素。
面板 Panels
面板可以包含若干UI子元素，根据不同的面板类型，按不同规则进行布局，下面是几个常见的面板标记类型。
Panel标记
最基本的面板类型就是Panel标记，Panel内的子元素会占用它的整个空间，如果是几个子元素，他们会依次层叠在一起，加以Alignment、margin和Padding属性，足以应对很多情况了。
<Panel>
<Text>This...</Text>
<Text>...will be on top of this</Text>
<Rectangle Alignment="BottomLeft" Height="20" Width="20" Fill="#678" />
</Panel>
可以将Panel里的元素想象成Photoshop里的层一样，最先出现在UX文件里的元素在最上层，其它依次位于下层。
StackPanel 堆栈式面板
StackPanel将子元素堆叠排列，缺省是垂直布局，如果想水平排列，可以使用Orientation属性。
<StackPanel Orientation="Horizontal">
... elements ...
</StackPanel>
另外，除了单独设置子元素各自的Margin值外，子元素的间距还可以在StackPanel里用一个ItemSpacing属性来指定，如下所示：
<StackPanel ItemSpacing="20">
<Panel Height="100" Background="Red"/>
<Panel Height="100" Background="Green"/>
<Panel Height="100" Background="Blue"/>
</StackPanel>
Grid 网格
使用网络系统布局子元素，一种是用Rows和Columns属性明细的指定行与列，另一种是简单的用RowCount和ColumnCount属性分配行数与列数。
RowCount & ColumnCount
如果需要等高等宽的行与列，这样的网格直接指定行数与列数即可：
<Grid RowCount="4" ColumnCount="2"/>
Rows & Columns
Rows和Columns属性让你可以更精确的控制行与列的大小。这些属性的参数是一个用逗号分开的清单，值可以是绝对的、相对的或自动的。
下面是个三行网格，行的高度分别为10、10和50（点）。
<Grid Rows="10,10,50"/>
同样是三行网格，前两行的高度各占20%，第三行占60%：
<Grid Rows="1*,1*,3*"/>
行的大小是这么计算的，先将所有数字相加1+1+3=5，然后每个数字除以总数字1/5=20%、1/5=20%、3/5=60%。
接下来的三行网格，前两行将占用最大的子元素的空间，最后一行占用剩下的：
<Grid Rows="auto,auto,1*"/>
使用网格布局元素
默认的情况，依次出现在UX文件的元素，会从左到右，从上到下的排列。你也可以给元素指定具体的网格, 如下所示：
<Grid RowCount="1" ColumnCount="2">
<Rectangle Row="0" Column="1" Fill="Red"/>
<Rectangle Row="0" Column="0" Fill="Blue"/>
</Grid>
包围面板 WrapPanel
WrapPanel面板依次排列子元素直到最后一起包起来，元素的排列方向可以用 FlowDirection来设定，从左到右，或者从右到左。
水平从右到左排列的WrapPanel见下例：
<WrapPanel FlowDirection="RightToLeft">
<Each Count="10">
<Rectangle Margin="5" Width="100" Height="100" Fill="Blue"/>
</Each>
</WrapPanel>
使用Orientation属性设置垂直排列的WrapPanel见下例：
<WrapPanel Orientation="Vertical">
<Each Count="10">
<Rectangle Margin="5" Width="100" Height="100" Fill="Blue"/>
</Each>
</WrapPanel>
WrapPanel还有两个属性：ItemWidth和ItemHeight用来定位一个元素的最大占用空间。
停靠面板 DockPanel
DockPanel可以将它的子元素依次停靠在不同的屏幕边上，每个元素可以用Dock属性指定停靠在那条边上。
<Rectangle Dock="Left"/>
Dock的有效值有：Left、Right、Top、Bottom和Fill(缺省值)。
<DockPanel>
<Style>
<Rectangle MinWidth="100" MinHeight="200"/>
</Style>
<Rectangle Fill="Red" Dock="Left"/>
<Rectangle Fill="Green" Dock="Top"/>
<Rectangle Fill="Blue" Dock="Right"/>
<Rectangle Fill="Yellow" Dock="Bottom"/>
<Rectangle Fill="Teal" />
</DockPanel>
上例中，Style给出了矩形的最小值，而Rectangle内并未给明尺寸，所以DockPanel会尽量用那个最小值去排列每个矩形，除非Dock属性设置为Fill。
Viewbox
用Viewbox标记让一个元素拉伸填充一个区域：
<Viewbox>
<Rectangle Background="#808" Width="200" Height="100" />
</Viewbox>
上例中的矩形拉伸到Viewbox的大小时，会始终保持2:1的比例。
拉伸的方向可以用StretchDirection属性来设置：
-
Both- 上下同时 -
UpOnly- 仅向上 -
DownOnly- 仅向下
除了DownOnly外，其它设置可能会产生伪像素，因为Viewbox将其内容执行的是位图拉伸。
内容可以设置StretchMode属性，缺省值为Uniform。
网友评论