导航栏随窗口大小变化而变化

Axure原型制作后台管理系统系列 之 

导航栏随窗口大小变化而变化

前言：为了学习使用Axure，我选择了一个后台管理系统进行模仿实现，该系列就是我在学习过程中的收获汇总，也算是对学习内容的整理，希望可以帮助自己更好地掌握。

1. 实现目的

如果在Axure工作区中添加矩形元件，将会在浏览器中将看到矩形元件的真实尺寸。

并且当浏览器的尺寸发生变化时，矩形元件的尺寸不会发生变化，即会出现以下的情况。

可以发现当导航栏的尺寸小于浏览器窗口尺寸时，就会显露出没有导航栏的空白部分。

2. 效果展示

 

3. 实现步骤

step1：添加两个矩形并放到合适的位置，一个作为侧边栏，一个作为顶部栏，具体尺寸根据自己的需要确定，此处仅为示例。另外，记得命名。

step2：点击工作区的空白处，在右侧的属性栏下选择【交互事件】下的【窗口尺寸改变时】

（注：点击空白处只是为了让右侧显示页面的属性）

step3：在交互用例中选择【元件】下的【设置尺寸】，选择对顶部栏设置尺寸后，点击右下角如图所示的【fx】，对顶部栏的宽度进行设定

在【编辑值】窗口里选择【插入变量或函数】，选择【窗口】下的【Window.width】，设置完成后点击确定

这一步可以这么理解，就是将顶部栏的宽度始终与浏览器的窗口宽度保持一致

侧边栏的设置步骤与顶部栏基本一样，只是需要将侧边栏的高度与浏览器的窗口高度保持一致。

如下图所示状态后点击确定

我们现在来看一下效果

然而到这里只是保证了这两个矩形的尺寸随窗口的尺寸变化而变化

我们知道，在大多数的后台管理系统中，顶部栏的最右端往往会放置登录用户的名称，而当浏览器窗口尺寸改变时，用户名称会始终固定在最右端，就像这样

显然，我们目前还未实现

要想让用户名称始终保持在顶部栏的最右侧，而不是当窗口尺寸变化时就会跑到顶部栏的中间，就需要固定用户名在浏览器窗口中的位置。

step4：新建一个动态面板，在动态面板中新建一个状态，在状态state1中添加文字——“用户12345678”，并将该动态面板放置到顶部栏的最右端

选择右侧属性中的【动态面板】下的【固定到浏览器】

由于我们需要将该用户名固定在顶部栏的最右侧，所以按照如图所示设置即可

我们看一下效果，此时用户名可以一直固定在顶部栏的右侧了！

 

4. 总结

此次案例共用到了两个功能，分别是：

① 交互事件【窗口尺寸改变时】

② 动态面板的【固定到浏览器】