加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

FLex3中弹出窗口包含TabNavigator时标签页的标题可能显示不完全

发布时间:2020-12-15 05:09:52 所属栏目:百科 来源:网络整理
导读:Application的代码如下 [xhtml] ? view plain copy ? xml ? version = "1.0" ? encoding = "utf-8" ? ?? mx:Application ? xmlns:mx = "http://www.adobe.com/2006/mxml" ? layout = "absolute" ?? ???? mx:Script ?? ????????!--[CDATA[?? ????????????impo

Application的代码如下

[xhtml]? view plain copy
  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute">??
  3. ????mx:Script>??
  4. ????????<!--[CDATA[??
  5. ????????????import?components.MyPanel;??
  6. ????????????import?mx.managers.PopUpManager;??
  7. ??????????????
  8. ????????????private?function?openWin():void??
  9. ????????????{??
  10. ????????????????var?win:MyPanel?=?new?MyPanel();??
  11. ??????????????????
  12. ????????????????PopUpManager.addPopUp(win,?this,?true)??
  13. ????????????????PopUpManager.centerPopUp(win);??
  14. ????????????}??
  15. ????????]]-- ????</mx:Button?x="57"?y="37"?label="Open?Window"?click="openWin()"/>??
  16. mx:Application>??

弹出窗口MyPanel的代码如下

copy
    mx:Panel?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="vertical"?width="400"?height="300"?fontSize="12" ????????????import?mx.managers.PopUpManager;??
  1. ????????]]--mx:TabNavigator?width="100%"?height="100%"?creationPolicy="all" ????????mx:Canvas?label="基本信息"?width="100%"?height="100%" ????????????mx:Button?x="39"?y="10"?label="按钮"/>??
  2. mx:Canvas ????????mx:Canvas?label="基信本息"?width="100%"?height="100%" ????????????mx:Label?id="msgLbl"?x="39"?y="10"?text="标签"mx:TabNavigatormx:ControlBar?horizontalAlign="right"mx:Button?id="closeBtn"?label="Close"?click="PopUpManager.removePopUp(this)"mx:ControlBarmx:Panel>??

运行后发现第一个标签页的标题显示为“基本...”。

经跟踪后发现,Flex执行代码的顺序如下

[cpp]? copy
    LayoutManager.doPhasedInstantiation()->LayoutManager.validateDisplayList()->UIComponent.validateDisplayList()->Tab.updateDisplayList()->Button.updateDisplayList()->Tab.layoutContents()->LayoutManager.validateDisplayList()->UIComponent.validateDisplayList()->Tab.updateDisplayList()->Button.updateDisplayList()->Button.layoutContents()->Tab.measureText()??

在Tab的measureText方法中,由于第一个标签页的样式名称为activeTabStyle,所以会调用UITextFormat.measureText()并最终调用UITextFormat.measure()来获取标题的宽度。在计算宽度时,执行语句

[javascript]? copy
    measurementTextField?=?TextField(textFieldFactory.createTextField(fontModuleFactory));??

调用TextFieldFactory的createTextField方法来获取一个文本控件TextField,然后设置该文本控件的text并获取宽度。

TextFieldFactory的createTextField方法获取文本控件的方式似乎是获取最后一个创建的文本控件,如果tabNavigator的creationPolicy为auto,会获取到clostBtn的textField,如果tabNavigator的creationPolicy为all,则会获取到msgLbl的textField。由于标签页的标题默认是加粗显示,所以如果获取到的TextField的样式不是加粗(fontWeight != 'bold'),那么计算出来的宽度会小于实际的宽度,从而使显示出来的标题被截断。(在Flex中,Label默认不加粗,Button的文本默认加粗)

因此,问题的解决方法有3种:

1.增加样式activeTabStyle并设置字体不加粗。下面的代码为了统一标题的样式,也设置了TabNavigator的tabStyleName样式。

copy
    mx:Style ????????.tabStyle,?.activeTabStyle??
  1. ????????{??
  2. ????????????font-weight:normal??
  3. ????????}??
  4. mx:TabNavigator?width="100%"?height="100%"?creationPolicy="all"?tabStyleName="tabStyle">??

2.保证最后一个文本控件的字体是加粗的。如以上的代码如果TabNavigator的creationPolicy是默认的auto,则由于closeBtn默认是加粗的,因此可以不设置。如果creationPolicy是all,则必须保证最后一页的最后一个控件的字体是加粗的,也可以放一个不显示的Label,如

copy
    mx:Label?includeInLayout="false"?visible="false"?text="隐藏的Label"?fontWeight="bold"/>??

3.在第一个标签页的label后加一个空格,如

copy
    mx:Canvas?label="基本信息?"?width="100%"?height="100%">??

经试验,所需空格的数量标题的长度有关,当标题只有一个字时不用加空格,之后每增加4个字要加一个空格。

?

?

如果弹出窗口时不执行PopUpManager.centerPopUp(),或者不用弹出窗口、TabNavigator直接显示在Application中,此时TabNavigator显示出来后会再刷新一次从而显示正确的标题,因此不需做任何改动。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读