Fuse学习<1>

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

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

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

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

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

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

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

标签(类)有如下种类:

  • App类是应用的根元素
  • 许多Node类型,大多数是UI元素
  • 可以修改节点的行为Behaviors。行为有多钟:GesturesTriggersScriptsVisual effects

Fuse的布局Layout

Fuse拥有强大的布局系统,无论使用原生元素或者基于元素的图形来构建应用,该布局系统可以适用于所有的平台与设备。面板(Panels)可以包含子UI元素,根据规则来进行布局。有几种类型的面板,每个拥有不同的布局规则:

  • Panel:最基本的面板是PanelPanel的子元素默认是填充整个空间,如果其包含几个子元素,那么它仅仅将各个子元素放于彼此之上。将这种行为与alignmentmarginpadding相结合可以使用在许多场合
<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:将子元素放于网格中,行与列可以通过RowsColumns属性来显式地声明,或者通过RowCountColumnCount属性来银式地声明。

<1. RowCountColumnCount

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

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

<2.RowsColumns

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

表格拥有三行,尺寸分别为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中出现的顺序来放置元素的,从左到右,从上到下。但是可以通过使用RowColumn来指定每个元素所在的网格单元格。

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

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

  • 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于YOLOv8的fuse选项关闭的问题,根据提供的引用内容,我没有找到与fuse选项相关的具体信息。可以在YOLOv8的相关文档或代码中查找更多关于fuse选项关闭的信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [YOLOv8详解 【网络结构+代码+实操】](https://blog.csdn.net/zyw2002/article/details/128732494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【v8初体验】利用yolov8训练COCO数据集或自定义数据集](https://blog.csdn.net/qq_44992785/article/details/129724862)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [YOLOv8模型学习笔记](https://blog.csdn.net/pengxiang1998/article/details/129151514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值