Axure RP 8 实现 圆角文本框 圆角带筛选的下拉列表框 可自动显示滚动条

刚开始用Axure 会发现 Axure 元件库并不是很齐全，很多元件需要自己想办法解决 或者去网上去找。其实个人建议网上有现成的元件可以就下载就不必花时间去折腾。除非你也想练练手，原型这种东西除非高保真的，也没必要画得那么逼真，能加说明说清楚就直接加说明，或者加便利贴都可以的。最终目的都是保证产品生产出来是用户真正想要的就行。

刚开始画原型 发现文本框好生硬，完完全全的四边型，显得原型看起来不是很专业（其实没几个人会去在意你原型文本框是圆角还是直角）。好啰嗦，直接正题。

元件库下载地址：https://pan.baidu.com/s/1ONfXrsWz-_ZFK_TA77dNPg 提取码：3ycw

解压后，在元件库载入元件库选择文件就可以直接拖出来用。

圆角文本框

Axure  RP 8 文本框样式设置是无法设置 边框圆角的（不知道为啥）。但是矩形是可以设置边框圆角。这样就可以借助 矩形来实现圆角的效果。

1、拉个矩形 边框设置为圆角

2、拉个文本框在属性栏设置隐藏边框（注意是属性栏不是样式栏 或者右键隐藏边框）

3、把矩形的位置大小设置成比文本框稍微大一点点刚好包能显示全边框

4、选中矩形与文本框设置成组合

如图：

带搜索带滚动条的下拉列表框

1、先复制一个圆角文本框，讲文本框属性设置只读

2、在框内加入向上 向下的 三角形（一开始先别叠加到一块，后面需要设置这两个形状的点击事件用户控制 选项区隐藏显示）

3、设置向下三角形隐藏

4、拖入一个矩形 一个文本框（要不要圆角的自己定） 一个动态面板（只有他才能控制滚动条），并设置成一个组合（这样控制隐藏显示时方便点）并且组合设置成隐藏

可以把矩形也设置成圆角 边框颜色也可以统一一下，看起来舒服点。

5、在动态面板state1中添加中继器，双击中继器 把中继器中的矩形边框设置为None，并且设置下中继器的鼠标悬停的交互效果 背景填充 F1F1F1

实现中继器的 选择时的光棒效果

6、然后在中继器属性中添加数据行

7、设置筛选，在筛选文本框中设置 改变文本事件

8、交互事件 文本改变时，在添加动作中选择添加筛选动作

9、名称随意，条件设置[[Item.Column0.indexOf(LVAR1)>-1]]

函数：字符串1.indexOf(字符串2) 就是匹配字符串2在字符串1中的哪个位置  返回字符串2在 字符串1中的首个字符位置的下标 index (下标从零开始)。

这里面的函数做过开发的基本一眼就能看懂。

设置方式如下，设置函数时点插入函数常用的函数都可以找得到的。这里添加了一个变量，这个变量就是取到我们文本框中输入的值，一变函数进行匹配

运行看一下效果

10、右击动态面板设置滚动条，垂直滚动条自动显示（自动显示的意思当内容超出动态面板时就会显示滚动条）

这里我把动态面板高度拉小了以便显示滚动条。

11、接下来继续设置下中继器 选中值填充到 文本框。打开动态面板state1,双击中继器，给中继器添加单击事件在左边添加动作中选择设置文本。

到这里提一下，养成给元件命名的习惯挺重要的，要不然你都不知道给哪个文本框赋值 。我这里就是没命名，结果第一赋值 弄错了，重新弄好再截图的。

这里添加一个变量，这个变量就是获取当前中继器 项item中的值

12、接下来就是控制隐藏显示了。

先来设置两个 三角形 向下三角形 单击事件

向上三角形单击事件

然后把向上的三角形设置成隐藏后，叠加到一起

13、最后设置下展示文本框的的点击事件

最后发现选中值后，下拉选项没隐藏，需要在中继器的点击事件中天机隐藏，选项组合 的隐藏。

一步步写出来其实挺麻烦，做起来其实也简单。

元件库下载地址：https://pan.baidu.com/s/1ONfXrsWz-_ZFK_TA77dNPg 提取码：3ycw

解压后，在元件库载入元件库选择文件就可以直接拖出来用。

里面圆角的多行文本框折腾半天没弄好（主要是多行文本框 用户可以直接拖动大小，二外面的矩形框又取不到 多行文本框大小的值），如果有大神请指教下