Fuse学习<1>

Fuse以两种主要方式来使用：

• 使用跨平台的JavaScript来创建应用或原型
• 创建组件、UI视图以及为原生应用设计

在Fuse中，这些效果的实现是通过UX标记的使用。

在Fuse中创建单独的应用或者原型，使用<App>标签。

<App Background="#436EEE">
    <Text>Hello, world!</Text>
</App>

在<App>标签里，你可以放任何Node，Behavior或者Theme标签。<App>标签自身代表应用，会负责应用生命周期与主题。

UX文档由XML标签组成，每个UX标签对应Uno代码中的一个类。每个标签对应一个或多个运行时对象。

标签(类)有如下种类：

• App类是应用的根元素
• 许多Node类型，大多数是UI元素
• 可以修改节点的行为Behaviors。行为有多钟：Gestures、Triggers、Scripts、Visual effects

Fuse的布局Layout

Fuse拥有强大的布局系统，无论使用原生元素或者基于元素的图形来构建应用，该布局系统可以适用于所有的平台与设备。面板(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>

• StackPanel：可以将其子元素放于栈中，默认的布局是垂直栈，但是可以使用Orientation属性来声明该栈可以水平布局。而且，可以使用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属性来银式地声明。

<1. RowCount与ColumnCount

如果网格的每行、每列的长度是相等的，可以使用RowCount与ColumnCount属性来简单地声明行与列的数量。

<Grid RowCount="4" ColumnCount="2"/>

<2.Rows与Columns

如果想更好地控制行与列的尺寸，可以通过Rows与Columns属性。

表格拥有三行，尺寸分别为10，10与50points：

<Grid Rows="10,10,50"/>

表格拥有3行，前2行占20%，最后一行占60%：

<Grid Rows="1*,1*,3*"/>

表格拥有3行，前两行会获取最大的尺寸，最后一行占据剩下的空间：

<Grid Rows="auto,auto,1*"/>

<3.在网格中摆放元素

默认，网格是按照在UX中出现的顺序来放置元素的，从左到右，从上到下。但是可以通过使用Row和Column来指定每个元素所在的网格单元格。

<Grid RowCount="1" ColumnCount="2">
    <Rectangle Row="0" Column="1" Fill="Red"/>
    <Rectangle Row="0" Column="0" Fill="Blue"/>
</Grid>

• WrapPanel：其布局它的元素方式是一个接一个，一碰到一端就会返回。可以通过FlowDirection属性来声明方向。FlowDirection的值要么是LeftToRight，要么是RightToLeft。

<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>

可以使用ItemWidth和ItemHeight属性来声明一个元素的最大区域。

• DockPanel：其布局子元素的方式是将子元素放于不同的侧边，一个接着一个。可以通过Dock属性来声明元素在哪一侧。

<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一个最小的尺寸。Rectangle没有任何默认的尺寸，所以DockPanel摆放它们时，会使用最小的尺寸，除了Dock设置为Fill。