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

flex 去掉combobox中的竖直分割线

发布时间：2020-12-15 05:04:32 所属栏目：百科 来源：网络整理
导读：flex 4?? sdk 4.5.1??? ? s:ComboBox width="60" height="20"/ 生成一个默认的combobox ?? 然后在设计模式?--属性--样式--外观?--创建外观? 为combobox设置新的皮肤： ? 自动生成如下的皮肤文件: ? ? xml ? version = "1.0" ? encoding = "utf-8" ? ? s:Spar

flex 4?? sdk 4.5.1???

? <s:ComboBox width="60" height="20"/>

生成一个默认的combobox

??

然后在设计模式?--属性--样式--外观?--创建外观? 为combobox设置新的皮肤：

?

自动生成如下的皮肤文件:

?

 
 
    

  1. <?xml?version="1.0"?encoding="utf-8"?>?
    2. 
  
  
  2. 
<s:SparkSkin?xmlns:fx="http://ns.adobe.com/mxml/2009"?xmlns:s="library://ns.adobe.com/flex/spark"? ?

    3. 
  
  
  3. 
????????xmlns:fb="http://ns.adobe.com/flashbuilder/2009"?alpha.disabled=".5">? ?

    4. 
  
  
  4. ???? ?
    5. 
  
  
  5. 
????<!--?host?component?-->?

    6. 
  
  
  6. 
????<fx:Metadata>?

    7. 
  
  
  7. 
????????<![CDATA[? ?
    8. 
  
  
  8. ????????/**? ?
    9. 
  
  
  9. ????????*?@copy?spark.skins.spark.ApplicationSkin#hostComponent ?
    10. 
  
  
  10. ????????*/ ?
    11. 
  
  
  11. ????????[HostComponent("spark.components.ComboBox")] ?
    12. 
  
  
  12. ????????]]>?
    13. 
  
  
  13. 
????</fx:Metadata>? ?

    14. 
  
  
  14. ???? ?
    15. 
  
  
  15. 
????<s:states>?

    16. 
  
  
  16. 
????????<s:State?name="normal"?/>?

    17. 
  
  
  17. 
????????<s:State?name="open"?/>?

    18. 
  
  
  18. 
????????<s:State?name="disabled"?/>?

    19. 
  
  
  19. 
????</s:states>?

    20. 
  
  
  20. ???? ?
    21. 
  
  
  21. ????<!---? ?
    22. 
  
  
  22. ????????The?PopUpAnchor?control?that?opens?the?drop-down?list.? ?
    23. 
  
  
  23. ???????? ?
    24. 
  
  
  24. 
????????<p>In?a?custom?skin?class?that?uses?transitions,?set?the? ?

    25. 
  
  
  25. 
????????<code>itemDestructionPolicy</code>?property?to?<code>none</code>.</p>?

    26. 
  
  
  26. 
????-->?

    27. 
  
  
  27. 
????<s:PopUpAnchor?id="popUp"??displayPopUp.normal="false"?displayPopUp.open="true"?includeIn="open"?

    28. 
  
  
  28. 
???????????????????left="0"?right="0"?top="0"?bottom="0"?itemDestructionPolicy="auto"?

    29. 
  
  
  29. 
???????????????????popUpPosition="below"?popUpWidthMatchesAnchorWidth="true">?

    30. 
  
  
  30. ???????? ?
    31. 
  
  
  31. ????????<!---? ?
    32. 
  
  
  32. ????????????This?includes?borders,?background?colors,?scrollers,?and?filters.? ?
    33. 
  
  
  33. ????????????@copy?spark.components.supportClasses.DropDownListBase#dropDown ?
    34. 
  
  
  34. 
????????-->?

    35. 
  
  
  35. 
????????<s:Group?id="dropDown">?

    36. 
  
  
  36. ???????????? ?
    37. 
  
  
  37. 
????????????<!--?drop?shadow?-->?

    38. 
  
  
  38. 
????????????<!---?@private?-->?

    39. 
  
  
  39. 
????????????<s:RectangularDropShadow?id="dropShadow"?blurX="20"?blurY="20"?alpha="0.45"?distance="7"? ?

    40. 
  
  
  40. 
?????????????????????????????????????angle="90"?color="#000000"?left="0"?top="0"?right="0"?bottom="0"/>?

    41. 
  
  
  41. ?
    42. 
  
  
  42. ???
    43. 
  
  
  43. ???????????? ?
    44. 
  
  
  44. 
????????????<!--?fill?-->?

    45. 
  
  
  45. 
????????????<!---?Defines?the?appearance?of?drop-down?list's?background?fill.?-->?

    46. 
  
  
  46. 
????????????<s:Rect?id="background"?left="1"?right="1"?top="1"?bottom="1"?>?

    47. 
  
  
  47. 
????????????????<s:fill>?

    48. 
  
  
  48. ????????????????????<!---?? ?
    49. 
  
  
  49. ????????????????????????@private ?
    50. 
  
  
  50. ????????????????????????The?color?of?the?drop?down's?background?fill. ?
    51. 
  
  
  51. ????????????????????????The?default?color?is?0xFFFFFF. ?
    52. 
  
  
  52. 
????????????????????-->?

    53. 
  
  
  53. 
????????????????????<s:SolidColor?id="bgFill"?color="0xFFFFFF"?/>?

    54. 
  
  
  54. 
????????????????</s:fill>?

    55. 
  
  
  55. 
????????????</s:Rect>?

    56. 
  
  
  56. ???????????? ?
    57. 
  
  
  57. 
????????????<!---?@private?-->?

    58. 
  
  
  58. 
????????????<s:Scroller?id="scroller"?left="0"?top="0"?right="0"?bottom="0"?hasFocusableChildren="false"?minViewportInset="1">?

    59. 
  
  
  59. 
????????????????<!---?@copy?spark.components.SkinnableDataContainer#dataGroup-->?

    60. 
  
  
  60. 
????????????????<s:DataGroup?id="dataGroup"?itemRenderer="spark.skins.spark.DefaultItemRenderer">?

    61. 
  
  
  61. 
????????????????????<s:layout>?

    62. 
  
  
  62. 
????????????????????????<s:VerticalLayout?gap="0"?horizontalAlign="contentJustify"?requestedMinRowCount="1"?requestedMaxRowCount="6"/>?

    63. 
  
  
  63. 
????????????????????</s:layout>?

    64. 
  
  
  64. 
????????????????</s:DataGroup>? ?

    65. 
  
  
  65. 
????????????</s:Scroller>?

    66. 
  
  
  66. 
????????</s:Group>?

    67. 
  
  
  67. 
????</s:PopUpAnchor>?

    68. 
  
  
  68. ???? ?
    69. 
  
  
  69. ????<!---??The?default?skin?is?ComboBoxButtonSkin.? ?
    70. 
  
  
  70. ????????????@copy?spark.components.supportClasses.DropDownListBase#openButton ?
    71. 
  
  
  71. 
????????????@see?spark.skins.spark.ComboBoxButtonSkin?-->?

    72. 
  
  
  72. 
????<s:Button?id="openButton"?width="19"?right="0"?top="0"?bottom="0"?focusEnabled="false"?

    73. 
  
  
  73. 
??????????????skinClass="spark.skins.spark.ComboBoxButtonSkin"?tabEnabled="false"?/>?? ?

    74. 
  
  
  74. 
????<!---?@copy?spark.components.ComboBox#textInput?-->?

    75. 
  
  
  75. 
????<s:TextInput?id="textInput"?enabled.disabled="false"?

    76. 
  
  
  76. 
?????????????????left="0"?right="18"?top="0"?bottom="0"? ?

    77. 
  
  
  77. 
?????????????????skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>? ?

    78. 
  
  
  78. ???? ?
    79. 
  
  
  79. 
</s:SparkSkin>?

    80. 
  
  
  80. ?
    81.

我删掉了生成的文件里面所有<fx:script>标签里面的东西以及<s:PopUpAnchor id="popUp" 里面border。

其中：

?<s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
????????????? skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" />?

控制下拉按钮的样式；

?<s:TextInput id="textInput" enabled.disabled="false"
???????????????? left="0" right="18" top="0" bottom="0"
???????????????? skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>

控制显示框的样式。

然后，为Button 和 textinput 的skinClass属性分别设置新的皮肤 如下：
??? <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
????????????? skinClass="skins.ComboboxButtonSkin" tabEnabled="false" />??
???? <s:TextInput id="textInput" enabled.disabled="false"
???????????????? left="0" right="18" top="0" bottom="0"
???????????????? skinClass="skins.ComboBoxTextInputSkin"/>?
?其中?? skins.ComboboxButtonSkin为 skins包下的ComboboxButtonSkin.mxml，代码如下：

?

 
 
    

  1. <?xml?version="1.0"?encoding="utf-8"?>?
    2. 
  
  
  2. ?
    3. 
  
  
  3. 
<s:SparkButtonSkin?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

    4. 
  
  
  4. 
???????????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

    5. 
  
  
  5. 
???????????????????xmlns:fb="http://ns.adobe.com/flashbuilder/2009"?

    6. 
  
  
  6. 
???????????????????minWidth="21"?minHeight="21"? ?

    7. 
  
  
  7. 
???????????????????alpha.disabled="0.5">?

    8. 
  
  
  8. ???? ?
    9. 
  
  
  9. 
????<fx:Metadata>?

    10. 
  
  
  10. 
????????<![CDATA[? ?
    11. 
  
  
  11. ????????/**? ?
    12. 
  
  
  12. ????????*?@copy?spark.skins.spark.ApplicationSkin#hostComponent ?
    13. 
  
  
  13. ????????*/ ?
    14. 
  
  
  14. ????????[HostComponent("spark.components.Button")] ?
    15. 
  
  
  15. ????????]]>?
    16. 
  
  
  16. 
????</fx:Metadata>?

    17. 
  
  
  17. ???? ?
    18. 
  
  
  18. ???? ?
    19. 
  
  
  19. 
????<!--?states?-->?

    20. 
  
  
  20. 
????<s:states>?

    21. 
  
  
  21. 
????????<s:State?name="up"?/>?

    22. 
  
  
  22. 
????????<s:State?name="over"?/>?

    23. 
  
  
  23. 
????????<s:State?name="down"?/>?

    24. 
  
  
  24. 
????????<s:State?name="disabled"?/>?

    25. 
  
  
  25. 
????</s:states>?

    26. 
  
  
  26. 
????<s:Rect?left="2"?right="2"?top="2"?bottom="2"?id="border"?height="20">?

    27. 
  
  
  27. 
????????<s:fill>?

    28. 
  
  
  28. 
????????????<s:SolidColor?color="#FFFFFF"?alpha="1.0"?/>?

    29. 
  
  
  29. 
????????</s:fill>?

    30. 
  
  
  30. 
????</s:Rect>?

    31. 
  
  
  31. 
????<s:Rect?left="1"?right="1"?top="1"?bottom="1"?id="fill">?

    32. 
  
  
  32. 
????????<s:fill>?

    33. 
  
  
  33. 
????????????<s:LinearGradient>?

    34. 
  
  
  34. 
????????????????<s:GradientEntry?color="#FFFFFF"?alpha="0.5"/>?

    35. 
  
  
  35. 
????????????</s:LinearGradient>?

    36. 
  
  
  36. 
????????</s:fill>?

    37. 
  
  
  37. 
????</s:Rect>?

    38. 
  
  
  38. 
????<s:Path?right="6"?verticalCenter="0"?id="arrow"?

    39. 
  
  
  39. 
????????????data="M?4.0?4.0?L?4.0?3.0?L?5.0?3.0?L?5.0?2.0?L?6.0?2.0?L?6.0?1.0?L?7.0?1.0?L?7.0?0.0?L?0.0?0.0?L?0.0?1.0?L?1.0?1.0?L?1.0?2.0?L?2.0?2.0?L?2.0?3.0?L?3.0?3.0?L?3.0?4.0?L?4.0?4.0">?

    40. 
  
  
  40. 
?????????<s:fill>?

    41. 
  
  
  41. 
????????????<s:RadialGradient?rotation="90"?focalPointRatio="1">?

    42. 
  
  
  42. 
????????????????<s:GradientEntry??color="0"?alpha="0.6"?/>?

    43. 
  
  
  43. 
????????????????<s:GradientEntry??color="0"?alpha="0.8"?/>?

    44. 
  
  
  44. 
????????????????</s:RadialGradient>?

    45. 
  
  
  45. 
????????</s:fill>?

    46. 
  
  
  46. 
????</s:Path>?

    47. 
  
  
  47. ?
    48. 
  
  
  48. 
</s:SparkButtonSkin>?

    49.

skins.ComboBoxTextInputSkin"为skins包下的ComboBoxTextInputSkin，代码如下：

?

 
 
    

  1. <?xml?version="1.0"?encoding="utf-8"?>?
    2. 
  
  
  2. 
-->?

    3. 
  
  
  3. 
<s:SparkSkin?xmlns:fx="http://ns.adobe.com/mxml/2009"?xmlns:s="library://ns.adobe.com/flex/spark"?

    4. 
  
  
  4. 
?????????????xmlns:fb="http://ns.adobe.com/flashbuilder/2009"? ?

    5. 
  
  
  5. 
?????????????alpha.disabledStates="0.5"?blendMode="normal">?

    6. 
  
  
  6. ???? ?
    7. 
  
  
  7. 
????<fx:Metadata>?

    8. 
  
  
  8. 
????????<![CDATA[? ?
    9. 
  
  
  9. ????????/**? ?
    10. 
  
  
  10. ????????*?@copy?spark.skins.spark.ApplicationSkin#hostComponent ?
    11. 
  
  
  11. ????????*/ ?
    12. 
  
  
  12. ????????[HostComponent("spark.components.TextInput")] ?
    13. 
  
  
  13. ????????]]>?
    14. 
  
  
  14. 
????</fx:Metadata>? ?

    15. 
  
  
  15. ???? ?
    16. 
  
  
  16. ???? ?
    17. 
  
  
  17. 
????<s:states>?

    18. 
  
  
  18. 
????????<s:State?name="normal"/>?

    19. 
  
  
  19. 
????????<s:State?name="disabled"?stateGroups="disabledStates"/>?

    20. 
  
  
  20. 
????????<s:State?name="normalWithPrompt"/>?

    21. 
  
  
  21. 
????????<s:State?name="disabledWithPrompt"?stateGroups="disabledStates"/>?

    22. 
  
  
  22. 
????</s:states>?

    23. 
  
  
  23. ???? ?
    24. 
  
  
  24. 
????<!--?border?-->? ?

    25. 
  
  
  25. 
????<!---?@private?-->?

    26. 
  
  
  26. 
????<s:Rect?left="1"?right="1"?top="1"?bottom="1"?id="border">?

    27. 
  
  
  27. 
????????<s:fill>?

    28. 
  
  
  28. 
????????????<s:SolidColor?color="0xFFFFFF"?/>?

    29. 
  
  
  29. 
????????</s:fill>?

    30. 
  
  
  30. 
????</s:Rect>?

    31. 
  
  
  31. ???? ?
    32. 
  
  
  32. 
????<!--?fill?-->?

    33. 
  
  
  33. 
????<!---?Defines?the?appearance?of?the?TextInput?component's?background.?-->?

    34. 
  
  
  34. 
????<s:Rect?id="background"?left="1"?right="1"?top="1"?bottom="1">?

    35. 
  
  
  35. 
????????<s:stroke>?

    36. 
  
  
  36. 
????????????<s:SolidColorStroke?color="#FFFFFF"?weight="2"?id="bgFill"/>?

    37. 
  
  
  37. 
????????</s:stroke>?

    38. 
  
  
  38. 
????</s:Rect>?

    39. 
  
  
  39. ???? ?
    40. 
  
  
  40. 
????<!--?shadow?-->?

    41. 
  
  
  41. 
????<!---?@private?-->?

    42. 
  
  
  42. 
????<s:Rect?left="1"?top="1"?right="1"?height="1"?id="shadow">?

    43. 
  
  
  43. 
????????<s:fill>?

    44. 
  
  
  44. 
????????????<s:SolidColor?color="0xFFFFFF"?alpha="1.0"?/>?

    45. 
  
  
  45. 
????????</s:fill>?

    46. 
  
  
  46. 
????</s:Rect>?

    47. 
  
  
  47. ???? ?
    48. 
  
  
  48. 
????<!--?text?-->?

    49. 
  
  
  49. 
????<!---?@copy?spark.components.supportClasses.SkinnableTextBase#textDisplay?-->?

    50. 
  
  
  50. 
????<s:RichEditableText?id="textDisplay"?

    51. 
  
  
  51. 
????????????????????????verticalAlign="middle"?

    52. 
  
  
  52. 
????????????????????????widthInChars="10"?

    53. 
  
  
  53. 
????????????????????????left="1"?right="1"?top="1"?bottom="1"?/>?

    54. 
  
  
  54. 
????<!---?Defines?the?Label?that?is?used?for?prompt?text.?The?includeInLayout?property?is?false?so?the?prompt?text?does?not?affect?measurement.?-->?

    55. 
  
  
  55. 
????<s:Label?id="promptDisplay"?maxDisplayedLines="1"?

    56. 
  
  
  56. 
?????????????verticalAlign="middle"?

    57. 
  
  
  57. 
?????????????mouseEnabled="false"?mouseChildren="false"?

    58. 
  
  
  58. 
?????????????includeIn="normalWithPrompt,disabledWithPrompt"? ?

    59. 
  
  
  59. 
?????????????includeInLayout="false"?

    60. 
  
  
  60. 
?????????????/>?

    61. 
  
  
  61. ???? ?
    62. 
  
  
  62. 
</s:SparkSkin>?

    63.

然后修改本文开头的自动生成的combobox的皮肤文件，为它加一个边框border：

?

 
 
    

  1. ???????</s:Group>?
    2. 
  
  
  2. 
???</s:PopUpAnchor>?

    3. 
  
  
  3. ?<s:Rect left="0" right="0" top="0" bottom="0" width="65" height="20"? id="border">
    ??<s:stroke>
    ???<s:LinearGradientStroke rotation="90">
    ????<s:GradientEntry color="#909090" 
    ???????? alpha="0.5625"/>
    ????<s:GradientEntry color="#909090"
    ???????? alpha="0.75" />
    ???</s:LinearGradientStroke>
    ??</s:stroke>
    ?</s:Rect>
    4. 
  
  
  4. ???<!---??The?default?skin?is?ComboBoxButtonSkin.? ?
    5. 
  
  
  5. ???????????@copy?spark.components.supportClasses.DropDownListBase#openButton ?
    6. 
  
  
  6. 
???????????@see?spark.skins.spark.ComboBoxButtonSkin?-->?

    7. 
  
  
  7. 
???<s:Button?id="openButton"?width="19"?right="0"?top="0"?bottom="0"?focusEnabled="false"?height="20"?

    8. 
  
  
  8. 
?????????????skinClass="skins.ComboboxButtonSkin"?tabEnabled="false"?/>?? ?

    9. 
  
  
  9. 
???<!---?@copy?spark.components.ComboBox#textInput?-->?

    10. 
  
  
  10. 
???<s:TextInput?id="textInput"?enabled.disabled="false"?

    11. 
  
  
  11. 
????????????????left="0"?right="18"?top="0"?bottom="0"? ?

    12. 
  
  
  12. 
????????????????skinClass="skins.ComboBoxTextInputSkin"/>??

    13.

这样就会生成如下图所示的没有竖直分隔符的combobox：

本方法的具体思想就是：利用ComboboxButtonSkin?? 和 ComboBoxTextInputSkin两个皮肤文件，去掉Button 和 textInput的边框，然后为Combobox整体添加一个边框。另外，我删了所有生成的文件里面的<fx:script>标签里面的内容，因为我也不知道干什么的，但是删了以后不影响实现设计- -

? 学习ING。。

（编辑：李大同）

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

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同