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

。