NarraLeaf

创建第一个页面

在 Main Page 上制作一个简单的标题界面,并在开发模式中检查

新建项目包含 Main Page。本页编辑这个默认页面,放置背景、标题和按钮,并在开发模式中检查结果

制作页面

打开 Main Page

在左侧活动栏选择 UI,将界面类型设为页面,然后打开 Main Page

页面在中央编辑区打开:左侧是 UI 大纲,中央是画布,右侧是属性面板,画布下方是插入栏

画布上打开的 Main Page,左侧 UI 大纲列出其中的控件,右侧属性面板显示页面属性

添加背景容器

在插入栏选择容器,在画布上单击或拖出一个区域。选中容器后,在属性面板中设置位置、尺寸和背景

若背景使用图片,将图片素材拖到画布上,Studio 会创建一个关联该素材的图片控件

把一张图片从素材面板拖到画布上,Studio 创建关联该素材的图片控件

添加标题

在插入栏选择文本,放置到画布上。双击文本可就地编辑内容,字体、字号、颜色和对齐方式在属性面板中设置

拖动控件可移动位置,拖动控制点可改变尺寸。智能吸附会将控件对齐到画布边缘、中心线和相邻控件

在画布上拖动文本控件,对齐时出现智能吸附参考线

添加按钮

选择按钮并放置到画布上,设置文字和外观。按钮行为稍后在控件蓝图中连接;只检查布局时不需要绑定事件

使用 UI 大纲

UI 大纲显示控件层级。容器可以包含其他控件,子控件随父容器一起移动。画布上重叠或过小、难以点选的控件,也可以在大纲中选中

右键控件可以重命名、显示或隐藏、调整前后顺序,或将所选内容加入组件库。一组控件需要复用时,再将其制作成组件

撤销与保存

  • Ctrl+Z 撤销,Ctrl+Shift+Z 重做
  • Ctrl+CCtrl+V 复制和粘贴控件
  • 删除页面会一并删除其中的控件;Main Page 不能删除
  • 页面数据写入项目的 UI 文档,没有单独的保存步骤

检查页面

选择画布右上角的播放按钮,在开发模式中打开当前页面。开发模式使用实际运行环境,可以检查比例、交互和蓝图行为

下一步参阅运行与打包

本页目录