组件树

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

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

• 组件是有层级的，被包含的为下级组件，相应的，另一个则为上级组件

• 非悬浮（fixed）组件相对于上级组件的左上角定位

• 视觉上，下级组件覆盖上级组件，同级组件排列靠后的覆盖排列靠前的组件

• 对上级组件的复制、删除操作会一起作用于所有下级组件。即复制上级组件时，所有下级组件也被复制；删除上级组件时，所有下级组件一起被删除。

组件树相关的操作

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

选中

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

重命名

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

复制

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

复制组件id

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

删除

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

加锁

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

拖拽

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