母版和状态 Part A（效果：底部导航菜单）

本节内容我们一起来完善一下页面，底部的这个导航，菜单，那么我们，目前这个原型里边，菜单里边有三个，图标也就意味着，有三个页面，那么，其实每个页面，里边都会有这么，一个菜单并且每个，菜单里边都有一个高亮的图标，用来表示当前显示的是哪个页面，那么，如果，大家，想象一下，啊如果我们，每个页面，都单独的制作一个，这样的导航，菜单，是不是，比较，繁琐呀，啊当然，我们目前，做的这个，原型里边，只有，三个，页面其实，页面，的数量，不是，很多我们，就是，哪怕，单独的复制粘贴，其实，做起来，也并不是，特别麻烦，但是，如果，大家想象，一下，如果说，我们，制作，的这个，菜单，呃图标的数量页面的数量比较多的话，那么，如果我们每个，页面都这样去复制粘贴，去做一遍其实也是怪麻烦，的，并且，如果说我们，后期想修改的话，比如说，我们想给里边的文字做一下变更，或者是在原来的基础上增加，一些，图标增加，一些这个，呃文字，那么其实，后期维护，的成本，也是比较高的，那么为了，解决，这个问题，呢我们磨刀，提供了一个，东西，叫做模板，在左侧，的这个第四个，选项卡，那么模板，呢它的作用，就是，当一个，模块，在不同，的页面当中，可以，进行，复用，的时候，我们，一般情况，下都把它制作成，一个，模板，那么在这个模板页面当中啊模板的这个选项卡里边有两个啊它自带的模板一个是轮播图一个是下拉菜单啊这个后续，的课程我们可以带大家一起来看一下，那么目前我们在制作底部导航菜单的时候是需要制作我们自己的模板的，那么我们点击新建按钮，给他起个名字就叫做，底部导航，底部导航菜单那么尺寸呢三百七十五乘以四十五，那么我们为了呃节约时间我们干脆直接把这个，把这个，原件，给它复制到剪切，到我们，这个，呃模板里边，就可以了，那么我们返回工作区，我们只要，把这个，底部，导航，菜单，的这个，模板，给它拖入到设计，区，哎这就可以，了，那么，有不同，的页面，每个，页面都会应用到，这个，模板对不对，那么，我们先把这个，页面，给它建出来，吧，我们，新建，页面比如说，叫联系人，再新建一个页面叫动态，那我们，先把这个，页面，的层级，关系我们，捋一下，这个，聊天，页面呢一般情况，下都是呃其实是，这个消息，页面，的一个，子页面，对不对，我们，拖动这个，聊天，页面，哎，这样就可以啊让这个页面的层级关系更加，清晰一些，那么，为了呃看起来，方便我们给这个联系人和动态这两个新增，的页面啊增加，一些标记，ok我们直接，弄两个标题栏，然后给它区分一下，那么其实，这两个页面，它都会应用，到底部，的导航菜单，这个模板，我们，直接，拖进来，ok那么，我们预览，一下，啊运行，一下，我们，看一下，这三个，主要，的页面，里边，哎我们，可以，看到，在这个，消息，页面，里边，它是看不到，这个，底部，的啊模板，底部，的导航，菜单，的，这是为什么，呢，我们，需要设置，它的相对，底部固定，这个属性，因为它是呃消息，这个页面，内容比较多嘛它是可以，垂直滚动的我们，要把它设置，为在底部，固定，我们再来，运行一下，哎，这个页面，消息页面，联系人，页面和动态页面，都有了底部，的模板，那么，这个，时候如果说，我们，要修改，一下里边，的文字，怎么样，呢，我们，双击编辑，模板，比如说我们把这个消息，给它改成，绘画，哎那么，我们，返回，工作区这个，时候，大家，可以，看每个，页面，它的文字，都自动做了修改对不对，ok那么我们，现在先把这个文字，先改回来，那么，这个，时候大家，可能会有疑问了这个，消息页面，它的这个，当前的高亮图标，确实应该是，消息这个，图标对不对，那么，其他两个，页面它的高亮图标，应该是对应，的这个，联系人以及，动态那么，这个效果，我们怎么做呢，那么接下来我们就要会提到，一个新的概念叫做状态，什么叫做状态呢，每个页面，或者，是每个，模板我们，现在，可以，把模板也简单，的理解，成了页面，啊就是，不同，的页面它都会有不同，的状态，那么在这些不同，的状态里边他拥有，的这些原件的，内容，都是一样的，也就是说，你每个状态，都会有，这些，图片都会有这些搜索框都会有这些文字，每个状态，这些，呃原件，的内容，数量，都是一样的，但是，不一样的是什么，呢，不一样的可能，是这些元件，的属性，不同，这样我和大家操作，一下大家，可能就明白，了，我们，双击一下，这个模板，进入到模板，的编辑，区域，大家，也可以把这个模板，理解为一个，页面啊，ok那么，在右侧，它会有这个，不同，的状态，对不对，它默认有两个状态，我们，第一个，状态，就是消息这个，页面消息，这个图标，是高亮的，那么我们可以，设置第二个状态，我们把，第一个状态，的内容，复制一下，粘贴，到第二个状态里边，来，那么，并且设置，第二个状态，联系人为高亮状态然后，其他，的为正常状态，那么，我们再新建一个，状态，修改，一下它的颜色，这个时候大家可能就会有一个比较直观，的感受了，就是说这一个页面当中有三个，状态这每个状态里边都有三个小标签儿还有一个底部的这个呃灰色的背景，但是，不同的是什么呢，不同的是这些基础元件，它的属性是不一样的，什么属性呢，就是颜色，属性是不一样的，第一个状态是消息是高亮的其他是正常的，第二个状态是消息，和动态是正常的联系人是高亮的，第三个，状态是动态是高亮的其他两个是正常的，大家这回，应该，有一个，比较直观，的感受，了对不对，那么，一个，模板里边，我们，可以设置，三种，不同的状态，那么为了呃，更清晰，一些，我们可以，双击，给它修改，一下，名字就叫做，消息，联系人，动态，ok那么我们返回工作区，那么，这个，时候，我们，再来看，一下，消息，页面，是正常，的联系人，页面，哎它还是，消息，这个，图标，是高亮状态，还是，不对，的对不对，那么，这个，时候，我们，选中，这个，模板，在外观，设置，里边，我们，选择，默认，状态，为联系人，就是，联系人，这个，状态，哎这个，时候，它这个，颜色，就正确，了对不对，那么，同理，动态，这个，页面，我们，同样，设置，默认，状态，为动态，状态三动态，ok那么，这个时候，我们，再来运行，一下，每个页面，起码它的这个颜色，都一样了，o k那么，接下来，我们，要给这个，模板，添加，页面的跳转，链接，那么，在添加跳转，链接之前我们，还要给这个，模板进行一下，简单的修改，我们双击它，我们要给这个大的组合给它打散，每一个状态都是要打散，ok那么我们返回工作区，我们，选中，这个，模板，那么，在左侧，呢它会弹出一个，悬浮，框告诉你我们要选择，一个，状态创建，模板，的链接，因为，这个，模板，有三个，状态，嘛每个状态，它都会有自己，不同，的链接，那么，在消息，这个，页面，里边，它其实是状态，一对，不对，它显示的是状态，一，所以我们选择消息这个状态然后选中联系人，链接到联系人，链接到动态，那么这个，消息，这个其实，就不需要，再添加，链接了因为，点击消息，的话，它就会链接到当前，页面，墨刀它其实是，不允许，给自己，呃链接到自己当前，页面的所以说我们，只添加，这两个，就可以了，o k那么，我们切换，到联系人选中模板，选中，联系人这个，状态给这两个，按钮添加，跳转链接，继续，好那么我们再次运行预览一下，那么这个效果，我们就实现了，那么，从从这一节课内容，大家可能，不难发现，模板这个，东西可能，和状态是密不可分，的，那么模板，非常简单，也非常，好理解就是，呃相同，的东西我们，把它放到一起然后，给不同的页面复用，这个很好理解，那么，关于状态，我们在后续的几节课当中还会啊这个使用不同的案例来为大家演示如何应用，状态这个东西，因为磨刀好多啊动态的交互效果都会应用到状态这个概念，ok那么，这节课内容，就是这么，多