文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
先讲思路
主页转换为动态面板，总共4个状态，按钮转换为动态面板，分别两个状态，设置交互，点击白色按钮时，主页动态面板切换为对应状态，当前按钮面板转换为绿色背景按钮状态，其他四个按钮则变成白色背景按钮的状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
再详细解释
1. 首先做一个主页（聊天界面），四个等大按钮至于底部并输入文字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
2. 将主页转换为动态面板，再添加3个状态（取消勾选自动调整为内容尺寸）每个状态下做一个主页，分别为聊天页，通讯页，发现页，我的页，每个页加文字，设置背景颜色以区分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
3. 将每个按钮转换为动态面板，每个动态面板分别再添加1个状态，，复制粘贴原来按钮矩形，并设置白字绿色背景。白色背景的状态命名为未选中，绿色背景的命名为选中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
注意：第一个聊天按钮，选中状态位于未选中状态之上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
4. 好了，开始交互，这里主要的交互事件触发器就是按钮，所以为每个按钮添加事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
点击白色（未选中）按钮时，屏幕动态面板切换为对应状态，比如点击通讯，则主页面板切换到通讯状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
当前按钮面板转换为绿色背景按钮状态，其他四个按钮则变成白色背景按钮的状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
比如双击发现按钮未选中状态，再双击右边交互栏中的“鼠标单击时”添加动作1：左边点击“设置面板状态”，勾上右边“主页面板”，选择发现状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
以此类推，设置四个按钮面板状态：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
然后类推到其他按钮未选中状态，添加事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
然后设置四个选中按钮的单击事件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
比如单击聊天按钮时，设置主页为聊天页。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html
ok，就此完成，预览试试吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/2398.html