axure9试用期结束怎么办

接上篇文章，这次主要来讲解一下聊天窗口的制作，首先看一下效果图：

我们要实现4个部分的功能：

1 好友聊天内容（关于实现与聊天列表中的内容一一对应本节未进行制作，这部分会在下篇文章中讲解）

2 我的聊天内容

3 文字输入框

4 发送按钮

那么闲话少叙，我们直奔主题

step1:制作好友聊天内容单元，这节中我们将好友聊天的内容直接写死在上面，如图1所示，我们根据需求设计一个聊天内容单元的样式，有头像，聊天内容和时间。

step2:在中继器-数据中根据需求新建列并对应填写数据如图21，并在使用中继器的交互给好友聊天内容单元初始化，填充内容如图22。具体初始化方式请参见上篇文章，至此我们得到了一个仅供展示的好友聊天内容单元。

step3:制作我的聊天内容样式，使用基本元件搭建文本气泡，头像和消息发送时间如图3。

step4:新建中继器，新建两列内容命名为ChatMessageIsay和MyAvatar并留空如图4，其中ChatMessageIsay的作用是为了后面从文本框中获取文字并加入到中继器中进行显示，而MyAvatar则是为了方便后期给中继器添加行的时候预留的（后期我们可以使用全局变量模拟头像URL来模拟换头像的 *** 作），在此步骤中暂时直接将头像选择固定。

step5:使用中继器初始化我的聊天内容，分别设置文本气泡中的文本图51，头像图52和消息发送时间图53，其中时间我们获取当前时间进行显示，函数写法见图。

step6:将step2和step5中制作好的好友聊天内容单元和我的聊天内容单元根据设计样式组合到一起并全选右键转化为动态面板，之后根据设计需要调整动态面板的尺寸，并将动态面板设置为垂直滚动，方便后面发送多条消息时滚动到最新发送的那条消息。如图6

step7:制作文字输入框，因为设计中该框仅为单层设计，故使用元件库中的文本框即可，另外多说一嘴，如果需要文字框随输入文字多少自适应变化的话，需要使用动态面板配合文本域进行制作，可以实现但是制作成本很高，远不及跟开发说一句“这个文本框尺寸需要根据输入内容动态变化，最大高度160pt来的简单高效”。另外此时文本框输入文字时是紧贴着左侧开始的，我们额外嵌套一个矩形元件来实现两边的间距如图7

step8:将step6和step7成果按照设计效果拼接，并排布发送键、键盘、顶部用户名，more按钮等元件如图8。

step9:点击顶部菜单栏-项目-全局变量>添加并命名一个新的全局变量ChatMyWords用来传递文字输入框(step7）中的内容至我的聊天内容单元(step5)如图9

step10:选择发送按钮，右侧交互-新建交互-单击时-下拉找到设置变量值-选择目标为step9中创建的全局变量ChatMyWords-设置为元件文字-元件选择为step7制作的输入框MessageField如图10。通过这个交互我们实现了将输入框中的文字存储于全局变量中。

step11:紧接着我们要将这个全局变量中的聊天内容显示在我的聊天内容单元中，做法依旧是在发送按钮上，右侧交互-添加动作-添加行-目标MyChatUnit-添加行如图11-在ChatMessageISay列中点击fx-插入变量或函数找到ChatMyWord-确认返回如图12。至此当我们点击发送按钮时，文字输入框中的内容就将显示于屏幕中。

step12：此时依然有个问题，当我们点击发送按钮时，文字输入框中的文字不会清空，故我们需要设置当点击发送按钮时-添加动作-设置文本-目标选择文字输入框MessageField-设置为文本-值留空如图13。这样当我们点击发送按钮时文本框中的内容就会清空，方便我们继续输入。

step13:已经做的差不多了，但此时当我们连续输入多个内容，到动态面板的尺寸显示不下时，最新的内容会藏在下面，所以我们继续优化每次发送时将动态面板中的内容滚动到最新发送的消息上。做法：点击发送按钮-添加动作-滚动到元件-目标MyChatUnit-垂直滚动-动画留空或自定义如图14。这样每次输入的时候都会滚动到最新发送的那条消息啦。

通过在发送按钮上添加以上步骤的交互如图15，就实现了我们开头动图中的效果啦，点击预览试一下吧。

OK下一篇文章我们会继续完善这个页面，实现聊天列表和聊天页面的联动。

1、切换元件库:在元件库功能面板中，可以通过点击元件库列表，选择不同的元件库进行使用。

2、设置页面居中:在页面样式设置中选择页面居中的按钮。页面居中是指在浏览器中查看原型时页面内容居中显示。

3、设置页面背景（/颜色）:在页面样式中可以编辑页面的背景颜色以及背景。

4、设置页面颜色（草图/黑白）:在页面的样式中，可以将当前页面的显示为草图效果，同时可以将页面颜色在彩色与黑白之间转换。

5、添加条件判断:在用例编辑界面中点击添加条件按钮进行添加条件。

6、比如：判断当前元件上的文字包含“@”。

7、设置条件逻辑关系:设置执行一个动作必须同时满足多个条件，或者仅需满足多个条件中的任何一个，需要在添加条件的界面中进行设置。

8、用例条件转换:为多个用例改变条件判断关系时，只需要在相应的用例名称上点击鼠标右键>，选择切换为或。

9、全局变量设置:全局变量是一个数据容器，就像一个U盘，可以把需要的资料存入，随身携带，在需要的时候读取出来使用。全局变量的设置在项目-全局变量中。

10、局部变量设置:局部变量在编辑值/文本的界面中进行创建，通过在插入变量或函数…列表中选取使用。

11、局部变量能够在创建时获取多种类型的数据。

12、公式的格式及类型:公式在编辑值/文本的界面中进行编辑，格式为“[[公式内容]]”。公式内的内容可以进行运算，例如：“[[315]]”获取的结果为“45”；公式运算结果自动与公式外的内容连接到一起，形成一个字符串，例如：“[[315]]个”获取的“45个”。变量与函数需要在写入在公式的“[[]]”中才能够正确获取变量值或者函数运算结果。

以上就是关于axure9试用期结束怎么办全部的内容，包括:axure9试用期结束怎么办、axure8.0无法获取团队项目，怎么解决、axure自学需要多久等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！