组件树

如果我们把每个组件作为一片树叶,定义被包含组件下级组件,相应的,另一个则为上级组件,上下级组件之间的联系作为树枝,最上级的组件(即根组件)为树根,那么,所有组件聚在一起呈现出的是一个倒置树的结构,我们称之为组件树,绘制为图像即工作区左下角的组件树

也许上面的描述有些晦涩,没关系,关于组件树我们仅需要了解以下几点:

  1. 组件是有层级的,被包含的为下级组件,相应的,另一个则为上级组件

  2. 非悬浮(fixed)组件相对于上级组件的左上角定位

  3. 视觉上,下级组件覆盖上级组件,同级组件排列靠后的覆盖排列靠前的组件

  4. 对上级组件的复制、删除操作会一起作用于所有下级组件。即复制上级组件时,所有下级组件也被复制;删除上级组件时,所有下级组件一起被删除。

组件树相关的操作

工作区左下角的组件树不仅指示了组件的层级结构,类似于操作区的组件,组件树同样也提供了一些操作入口。

选中

点击组件树某节点即选中这个组件,同时,在操作区该组件高亮显示。将鼠标悬停于某节点之上,出现一排操作图标(如果不清楚各个图标的作用,将鼠标移动到小图标上,稍作等待,即出现功能提示)。

重命名

点击重命名图标,可以重新编辑节点名称,回车键保存。

复制

点击复制按钮即可复制该组件至同级。

复制组件id

操作同复制,提供快速获取组件 id 的功能。

删除

点击“删除”即可删除该组件及下级所有组件。

加锁

点击锁的图标可以控制该节点是否锁定,若锁定状态则无法选择该节点。

拖拽

按住某个节点拖动,拖到某个节点上方或者两个节点之间,松开鼠标,即可移动组件在组件树中的位置。至于拖动组件到另一组件上方与两个组件之间的区别请自行尝试。