【译】Fuse入门（八）

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。