状态Part B（效果：列表的展开收起）

嗯，这一节课我们一起来制作一下联系人这个页面，在联系人页面当中，它会有不同的分组，那么我们就一起来做一下这个分组的展开和收起效果，ok，那么为了节约时间啊，我们我提前把这个联系人页面上边这些元素我都提前弄好了，这个没有什么特别大的难度，就是用一些这基础的布局原件啊，大家啊往里边排一下板就可以了，那么重点在于下边的这个分组，我们一起来做一下，分组，首先左侧它是一个这个呃小箭头，那么我们找一下，拖进来，然后简单设置一下它的这个图标的颜色，还有图标的大小，嗯，ok我们复制一下，ok，那么我先把这四个分组标签给它弄出来了啊，然后呃，里边是这个，相当于是联系人，那么我为了节约时间，我就把这个复制一下，先给他打伞，上面是这个昵称，下边是这个，呃他的在线状态，大概就是这个意思吧，然后呢，我们给他，同样是啊编组，然后给它复制一下，我们就复制三个吧，简单示意，那么在这个展开状态下，这个箭头是不是应该是朝下的呀，所以说我们选中这个箭头，然后，修改一下它的角度为九十度，哎，这样的话它展开展开时的这个样式我们就做好了，那么我们如何做做出来这个展开收起的动态效果呢，我们一起来想象一下啊，这个展开和收起是不是可以理解为同一个页面的两个不同的状态啊，那么我们上节课说了这个页面的状态，它不同的状态里边，它所页面上拥有的原件是应该是相同的，只不过是属性不一样，对不对，那么展开和收起，在收起状态下是没有这个好友列表的，那么我们如何做到让他在展开和收起这两个状态下，这个呃，原件让他一模一样呢，那么在那我们只好做一个变通，也就是说在收起状态下，我们让这一些好友列表隐藏，那么原件是在，但是它的属性是隐藏，这样的话我们是不是就做到了在不同的状态下，原件的个数啊呃内容啊都是一样的，只不过属性不一样这么一个特性，对不对，ok，那么这个时候我们在页面的右边有一个状态悬浮框，如果没有的话，点击这个呃小圆圈这个图标就可以打开，那么它默认的呢有两个状态，一个是全局状态，一个是默认状态，我们刚刚添加的这些呃所有的操作都是在默认状态下进行的，那么我们再添加一个状态，我们可以双击重命名，啊，就叫做收起，ok那么我们进入到状态，二，首先我们先把，这个，箭头的角度给改成零度，那么接下来我们把这些原件都给它设置为隐藏，在图层这块有一个小眼睛，大家能不能看到点击这个小眼睛，它就变成了隐藏状态，大家可以看到它的颜色也都变浅了，那么收起的时候，下边这两个分组名称是不是也要上移啊，移动到大概，大概就这个位置吧，ok那么接下来我们要做的呢就是添加交互动作，当他处于状态一的时候，点击这个我的好友分组，他会，链接到或者说跳转到状态，二当它是状态二的时候，再点击我们链接到默认状态，也就是状态一ok那么我们运行一下，哎，这个动作我们就做完了，但是大家看到其实它，不是很顺畅，看起来有点别扭，对不对，那么其实它默认的这个切换状态的动作，它是有一个呃过渡效果的，但实际上在进行这个交互动作的时候，我们其实并不需要过渡效果，对不对，那么我们，可以进行这样一个设置，也就是说选点击这个啊小图标，然后把这个动效时长给它改成未设置，下边这个也是动效时长改成未设置，这样的话我们再来运行预览一下，这样的话就顺畅许多了，对不对，那么接下来我们大家再思考一个问题啊，在真正的a p p当中，我们是不是，不仅仅是点击这一部分可以展开收起啊，其实我们点击这一大片区域，它都是可以把这个呃列表进行展开和收起操作的，这个也是，在手机a p p当中呃，非常呃呃需要大家注意的一点交互的细节，也就是说因为你的移动设备的屏幕是非常小的，那么啊为了让它操作方便呢，它并不局限于某一小个地方，有可以点击或者是可以有交互，可能一大片地方它都可以点，那么为了实现这种效果呢，我们可以，拖入一个链接区域这么一个元件进来，那么，大家注意，我把它拖进来之后，他给我了一个弹框，告诉我当前页面不只有一个页面状态，请切换到全局状态，添加新的组件，因为这个页面状态它有一个要求，就是不同的状态下，它的原件必须是相同的，一模一样的，包括个数啊，种类等等，那么刚刚我们是在这个呃默认状态下去添加了一个呃组件，添加了一个链接区域这么一个组件，那么你按理说在收，状状态下也应该有一个，那么这样的话可能就有矛盾了，所以说我们要切换到全局状态，然后再次拖入这个链接区域，那么我们把这个刚刚添加的这两个，链接都给它去掉，那么同样我们切换到状态，一，选中这个链接区域，然后呢，链接到收集状态，并且动销市场给它取消掉，状态，二，同样，同理，ok那么我们再次运行预览，这样的话我们从，这个横向的任何区域在点击的时候，它都能够实现展开和收起的效果，ok那么本节内容就制作完成了