• 2. 通讯录例子上：编辑界面

演示界面编辑方式

演示组件外观编辑方法

演示触发事件编辑方法

---

创建项目“通讯录”，点击进入项目主页，如图1

点击“编辑”分页栏，点击“电脑端界面”或“移动端界面”

当前只有一个版本：初始化，并且是选中状态（字体颜色为绿色），点击右侧“编辑选中的版本”按钮

界面编辑器如图2

界面以页面为单位，页面内包含可视组件/变量，组件有外观属性/可以触发事件/可以绑定数据/有调用接口

新项目页面列表为空，点击页面列表右侧的+加号按钮新增一个页面

新增页面对话框中输入页面名称，点击“保存”按钮

点击“保存”按钮后页面列表中如图，红色表示此页面为选中状态

每个新页面只有一个组件：根面板，此面板必须有且无法删除，当前根面板字体颜色为红色选中状态，屏幕中间的红框为此根面板外框

点击“组件库”按钮增加组件，当前选中的根面板为新增组件的容器

面板组件为容器，可以包含其它组件，其它组件也可以是面板，面板是排版的重要方法

系统组件是图丫内置的/最基本/最为常用的组件，特殊组件可以自己开发，也可以在组件市场中探索

此处为界面新增一个按钮组件，将鼠标移动到“按钮”上面悬停

此时出现“点击添加”按钮，点击这个按钮

向下滚动条组件库，再添加一个“表格”组件

关闭组件库窗口，组件树中根面板下出现两个新增的组件，右侧中间窗口页面展示区出现两个组件

点击组件树中按钮节点或者点击中间展示区的按钮来选中这个按钮组件

点击最右侧“数据与交互”，在绑定数据/按钮标题中输入按钮标题

点击组件树左下角+加号按钮，弹出菜单中点击“弹窗”按钮，新增一个弹窗

输入弹窗名称，点击“保存”按钮

选中新增的“编辑通讯录”弹窗

展示区中灰色部分为弹窗的背景，白色部分为弹窗本身

鼠标滚轮向下滚动，按钮键盘“shift”键不要松开同时鼠标滚轮向下滚动，将弹窗放置在方便编辑的位置

弹窗处于选中状态时点击”组件库“按钮，为弹窗新增一个“面板”组件

选中这个新增的面板，最右侧外观面板中将宽度改为100%（100%的意思是父容器多宽我就多宽），高度改为60px（px为一个像素），内部布局改为“弹性”，左右改为“居中”

去掉边框

为这个面板新增一个“文本框”组件，将这个文本框的内容改为：编辑通讯录

选中弹窗，为弹窗再新增一个面板组件，外观参数与上面的面板一致

选中这个面板，新增一个文本框和一个输入框

将文本框内容对齐方式改为“靠右”，右边距改为“20px”

选中输入框，将宽度改为“200px”，右边距改为“50px”

再增加几个面板，依次为电话/邮箱/地址，最后一个面板中新增两个按钮

选中取消按钮，点击“数据与交互”栏，点击”点击“事件右侧”+新建触发动作“按钮，点击”隐藏/显示组件“按钮

选择组件树中”编辑通讯录“节点，点击右侧眼睛图标，使其变为灰色，组件树顶部显示“隐藏”两个字，点击“保存”按钮

选中根面板中的“新增”按钮，为其新增一个“隐藏/显示组件”动作

将“编辑通讯录”节点右侧眼睛图标设置为绿色，顶部显示“显示”两个绿字

点击最右下“保存”按钮

点击展示区顶部“在新窗口中预览”按钮看看效果吧