0

我有一个带有谷歌地图、面积图和包含列表的手风琴的应用程序。当列表中的选择发生更改时，应用程序从服务器获取数据并更新图表和地图，重新定位地图以包含其视口内的所有标记，并启动 SeriesEffect 以动画图表数据重绘。

当用户更改选择并在重新绘制地图和图表时继续将鼠标悬停在列表中的项目上时，项目渲染器上的标签会消失。

项目渲染器代码如下：

<s:ItemRenderer xmlns:fx = "http://ns.adobe.com/mxml/2009"
            xmlns:s = "library://ns.adobe.com/flex/spark"
            xmlns:mx = "library://ns.adobe.com/flex/mx"
            autoDrawBackground = "false"
            xmlns:components = "com.ibenergy.components.*">
<s:layout>
    <s:BasicLayout>

    </s:BasicLayout>
</s:layout>

<s:states>
    <s:State name = "hovered" />

    <s:State name = "selected" />

    <s:State name = "normal" />

</s:states>

<fx:Script>
    <![CDATA[
        import mx.core.UIComponent;
        import mx.states.OverrideBase;
        import spark.components.DataGroup;
        import valueObjects.DateRange_type;
        import valueObjects.Utilities_type;

        private var _data : Object;

        private var _dataLabel : String;

        [Bindable( "dataChanged" )]
        override public function get data () : Object {
            return _data;
        }

        override public function set data ( value : Object ) : void {
            _data = value;

            if ( value is String ) {
                dataLabel = String ( value );
            } else if ( value is Utilities_type ) {
                dataLabel = Utilities_type ( value ).Name;
            } else if ( value is DateRange_type ) {
                dataLabel = DateRange_type ( value ).QueryName;
            }
            dispatchEvent ( new Event ( "dataChanged" ) );
        }

        [Bindable]
        public function get dataLabel () : String {
            return _dataLabel;
        }

        public function set dataLabel ( value : String ) : void {
            _dataLabel = value;
        }
    ]]>
</fx:Script>

<!-- layer 2: fill -->

<!--- @private -->
<s:Rect id = "fill"
        left = "1"
        top = "1"
        width = "24"
        height = "24"
        radiusX = "2">
    <s:fill>
        <s:LinearGradient rotation = "90">
            <s:GradientEntry color = "0x3F3F40" color.selected = "0x999999" alpha = "1.00" ratio = "0.00" />

            <s:GradientEntry color = "0x999999" color.selected = "0x72A94A" alpha = "1.00" ratio = "1.00" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 4: fill highlight -->

<!--- @private -->
<s:Rect id = "highlight"
        left = "1"
        top = "1"
        width = "24"
        height = "24"
        radiusX = "2">
    <s:fill>
        <s:LinearGradient rotation = "90">
            <s:GradientEntry color = "0x3F3F40"
                             ratio = "0.0"
                             alpha = "1.0"
                             alpha.selected = "0.22"
                             alpha.hovered = "0.22" />

            <s:GradientEntry color = "0xBBBDBF" ratio = "0.125" alpha = "1.0" />

            <s:GradientEntry color = "0xFFFFFF" ratio = "0.25" alpha = "0" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 5: highlight stroke (all states except down) -->

<!--- @private -->
<s:Rect id = "highlightStroke"
        left = "1"
        top = "1"
        width = "24"
        height = "24"
        radiusX = "2"
        excludeFrom = "selected">
    <s:stroke>
        <s:LinearGradientStroke rotation = "90" weight = "1">
            <s:GradientEntry color = "0x3F3F40" alpha = "1.0" />

            <s:GradientEntry color = "0xBBBDBF" alpha = "1.0" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>


<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->

<!--- @private -->
<s:Rect id = "border"
        left = "0"
        right = "0"
        top = "0"
        bottom = "0"
        width = "69"
        height = "20"
        radiusX = "2">
    <s:stroke>
        <s:LinearGradientStroke rotation = "90" weight = "1">
            <s:GradientEntry color = "0x000000" alpha = "0.00" />

            <s:GradientEntry color = "0x000000" alpha = "0.00" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>

<!-- layer 8: text -->

<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->

<!-- font-weight:bold;
font-size:8;
color:#000000;-->
<components:ItemRendererLabel id = "labelDisplay"
                              renderingMode = "cff"
                              textAlign = "left"
                              left = "29"
                              verticalAlign = "middle"
                              right = "2"
                              top = "2"
                              bottom = "2"
                              text = "{ dataLabel }"
                              includeIn = "hovered,normal,selected">

</components:ItemRendererLabel>

它使用以下 css 进行样式设置：

@font-face {
    src: url("com/ibenergy/fonts/Myriad/MyriadWebPro.ttf") ;
    fontFamily: MyriadHalo;
    embed-as-cff:false;
    font-weight:normal;
    font-style:normal;
    unicodeRange:
        U+0041-U+005A, /* Upper-Case [A..Z] */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0030-U+003F, /* Numbers [0..9] */
        U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,- ] */
        U+003A-U+0040, /* Special Chars [ :;<=>?@ ] */
        U+005B-U+0060, /* Special Chars [ [\]^_` ] */
        U+007B-U+007E, /* Special Chars [ {|}~ ] */
        U+00A3-U+00A3, /* British Pound Symbol */
        U+00A9-U+00A9, /* Copyright Symbol */
        U+00AE-U+00AE, /* Registered Symbol */
        U+00B0-U+00B0, /* Degrees Symbol */
        U+00BC-U+00BE, /* Fractions Symbols */
        U+00A1-U+00A1, /* Latin Character: ¡ */
        U+00BF-U+00BF, /* Latin Character: ¿ */
        U+00C0-U+00FF, /* Latin Characters */
        U+2013-U+2014, /* EN Dash, EM Dash */
        U+2018-U+2019, /* Directional Single Quotes */
        U+201C-U+201D, /* Directional Double Quotes */
        U+2022-U+2023, /* Bullets */
        U+2120-U+2120, /* SM */ 
        U+2122-U+2122; /* Trade mark (TM) */ 
}

@font-face {
    src: url("com/ibenergy/fonts/Myriad/MyriadWebPro-Bold.ttf") ;
    fontFamily: MyriadHalo;
    embed-as-cff:false;
    fontWeight: bold;
    font-style:normal;
    unicodeRange:
        U+0041-U+005A, /* Upper-Case [A..Z] */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0030-U+003F, /* Numbers [0..9] */
        U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,- ] */
        U+003A-U+0040, /* Special Chars [ :;<=>?@ ] */
        U+005B-U+0060, /* Special Chars [ [\]^_` ] */
        U+007B-U+007E, /* Special Chars [ {|}~ ] */
        U+00A3-U+00A3, /* British Pound Symbol */
        U+00A9-U+00A9, /* Copyright Symbol */
        U+00AE-U+00AE, /* Registered Symbol */
        U+00B0-U+00B0, /* Degrees Symbol */
        U+00BC-U+00BE, /* Fractions Symbols */
        U+00A1-U+00A1, /* Latin Character: ¡ */
        U+00BF-U+00BF, /* Latin Character: ¿ */
        U+00C0-U+00FF, /* Latin Characters */
        U+2013-U+2014, /* EN Dash, EM Dash */
        U+2018-U+2019, /* Directional Single Quotes */
        U+201C-U+201D, /* Directional Double Quotes */
        U+2022-U+2023, /* Bullets */
        U+2120-U+2120, /* SM */ 
        U+2122-U+2122; /* Trade mark (TM) */ 
}

@font-face {
    src: url("com/ibenergy/fonts/Myriad/MyriadPro-It.otf") ;
    fontFamily: MyriadHalo;
    embed-as-cff:false;
    fontStyle: italic;
    fontWeight: normal;
    unicodeRange:
        U+0041-U+005A, /* Upper-Case [A..Z] */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0030-U+003F, /* Numbers [0..9] */
        U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,- ] */
        U+003A-U+0040, /* Special Chars [ :;<=>?@ ] */
        U+005B-U+0060, /* Special Chars [ [\]^_` ] */
        U+007B-U+007E, /* Special Chars [ {|}~ ] */
        U+00A3-U+00A3, /* British Pound Symbol */
        U+00A9-U+00A9, /* Copyright Symbol */
        U+00AE-U+00AE, /* Registered Symbol */
        U+00B0-U+00B0, /* Degrees Symbol */
        U+00BC-U+00BE, /* Fractions Symbols */
        U+00A1-U+00A1, /* Latin Character: ¡ */
        U+00BF-U+00BF, /* Latin Character: ¿ */
        U+00C0-U+00FF, /* Latin Characters */
        U+2013-U+2014, /* EN Dash, EM Dash */
        U+2018-U+2019, /* Directional Single Quotes */
        U+201C-U+201D, /* Directional Double Quotes */
        U+2022-U+2023, /* Bullets */
        U+2120-U+2120, /* SM */ 
        U+2122-U+2122; /* Trade mark (TM) */ 
}

@font-face {
    src: url("com/ibenergy/fonts/Myriad/MyriadPro-BoldIt.otf") ;
    fontFamily: MyriadHalo;
    fontStyle: italic;
    embed-as-cff:false;
    fontWeight: bold;
    unicodeRange:
        U+0041-U+005A, /* Upper-Case [A..Z] */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0030-U+003F, /* Numbers [0..9] */
        U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,- ] */
        U+003A-U+0040, /* Special Chars [ :;<=>?@ ] */
        U+005B-U+0060, /* Special Chars [ [\]^_` ] */
        U+007B-U+007E, /* Special Chars [ {|}~ ] */
        U+00A3-U+00A3, /* British Pound Symbol */
        U+00A9-U+00A9, /* Copyright Symbol */
        U+00AE-U+00AE, /* Registered Symbol */
        U+00B0-U+00B0, /* Degrees Symbol */
        U+00BC-U+00BE, /* Fractions Symbols */
        U+00A1-U+00A1, /* Latin Character: ¡ */
        U+00BF-U+00BF, /* Latin Character: ¿ */
        U+00C0-U+00FF, /* Latin Characters */
        U+2013-U+2014, /* EN Dash, EM Dash */
        U+2018-U+2019, /* Directional Single Quotes */
        U+201C-U+201D, /* Directional Double Quotes */
        U+2022-U+2023, /* Bullets */
        U+2120-U+2120, /* SM */ 
        U+2122-U+2122; /* Trade mark (TM) */ 
}
controls|PrecisionOptionRenderer{
    font-family:MyriadHalo;
    rendering-mode:normal;
}
controls|PrecisionOptionRenderer:normal,
controls|PrecisionOptionRenderer:hovered,
controls|PrecisionOptionRenderer:selected{
    font-weight:bold;
    font-size:8;
    color:#000000;
}

预期的行为是标签应始终呈现。

我试过使用validateNow()on dataChange; 删除 css 中的所有状态并仅使用 css 中的组件类型选择器；将样式直接放在LabelItemRenderer 中；ToggleButton使用带有ChangeWatcher更新的Label.textFlex框架dataChange；覆盖setStyle()以确保没有undefined值被传递给样式属性，getCurrentRendererState()以确保状态集是我已经涵盖的状态，并updateDisplayList()尝试Label在更新时设置颜色。

Label即使在所有重绘完成后，它仍然会消失并保持缺失。选择和取消选择项目时，填充会正确更改。有没有人遇到过这个问题和/或任何人都可以想出一个我还没有尝试过的解决方法？

提前致谢...

4

3 回答 3

2

在您的应用程序中的某处调用下一个代码（即 initializeHandler）：

TextLineRecycler.textLineRecyclerEnabled = false;

这将解决问题。

于 2011-06-15T06:59:15.753 回答
0

尝试等待复杂组件上的 updateComplete() 事件，然后等待“消失”元素上的 validateNow()。

于 2013-05-06T06:43:08.463 回答
0
  1. 尝试从节点中删除includeIn属性ItemRendererLabel
  2. 尝试覆盖getCurrentRendererState()并返回准确的状态字符串，因为ItemRenderer返回更多的状态字符串。
于 2011-04-17T09:57:42.107 回答