0

FlexのTabBarでカスタムスキンを使用しており、具体的にはコントロールButtonBarButtonのスキンを使用しています。ボタンの幅は、含まれるテキストに応じて可変サイズであり、ボタンの背景は、ボタンの選択された状態でのみ表示される画像です。

以下は、スキン用の私のMXMLです。

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" stateGroups="overStates" />
    <s:State name="down" stateGroups="downStates" />
    <s:State name="disabled" stateGroups="disabledStates" />
    <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
    <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
    <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
    <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<!-- invisible background to prevent "machine gun" flickering on edge of button -->
<s:Rect top="0" bottom="0" left="0" right="0">
    <s:fill>
        <s:SolidColor color="0xFFFFFF"
                      alpha="0.0"/>
    </s:fill>
</s:Rect>
<s:Group>
    <s:layout>
        <s:HorizontalLayout gap="0"/>
    </s:layout>

    <!-- left edge of button -->
    <s:BitmapImage source.selectedStates="images/btn_left.png"
                   top="0" bottom="0" left="0"
                   width="6"/>
    <!-- background and text of button -->
    <s:Group>
        <!-- layer 1: image -->
        <s:BitmapImage source.selectedStates="images/btn_bg.png"
                       fillMode="repeat"
                       left="0" right="0"/>
        <!-- layer 2: text -->
        <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
        <s:Label id="labelDisplay"
                 textAlign="center"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 horizontalCenter="0" verticalCenter="1"
                 left="10" right="10" top="2" bottom="2">
        </s:Label>
    </s:Group>
    <!-- right edge of button -->
    <s:BitmapImage source.selectedStates="images/btn_right.png"
                   top="0" bottom="0" right="0"
                   width="6"/>
</s:Group>

マウスオーバーとマウスアウトでボタンがちらつきます。このタイプのボタンの状態が欠落しているかどうか、またはボタンのソースを誤って適用しているかどうかを誰かが知っていますか？

その他のコードについては、TabBarコンポーネントは次のようにレイアウトされています。

<s:Group>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:Group>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:Label text="Title:"/>
        <s:Label text="Sign in"/>

    </s:Group>
    <s:TabBar dataProvider="{navigationList}"
              chromeColor="#FFFFFF"
              skinClass="skins.NavigationBarSkin"/>
</s:Group>

オーバーライドされたTabBarSkinには次のスニペットがあります。

<!-- layer 1 background -->
<s:Rect id="backgroundFill" topLeftRadiusX="4" topRightRadiusX="4" top="0" bottom="0" left="0" right="0">
    <s:fill>
        <s:LinearGradient>
            <s:GradientEntry color="0x625454"/>
            <s:GradientEntry color="0x3F3536"/>
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" 
             top="10" left="15" right="15" bottom="0">
    <s:layout>
        <s:ButtonBarHorizontalLayout gap="10" />
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <s:ButtonBarButton skinClass="skins.NavigationBarButtonSkin" />
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

ブロック全体をグループタグでラップしようとしましたが、役に立ちませんでした。目に見えないRectは、マウスがボタンのいずれかの端にカーソルを合わせたときに発生した「マシンガン」のちらつきを実際に修正しますが、各ボタンのマウスの入力と終了のたびにちらつきがあります。

4

1 に答える 1

0

理解した：

重要なのは、@Embedメソッドを介してBitmapImageのソースを設定することでした。

<s:BitmapImage source.selectedStates="@Embed('images/btn_left.png')"/>

Flashで働いていた頃からこれを覚えていたはずです。Embedアノテーションが使用されていない場合、リソースはリンクされているため、状態が変更されるたびに、つまりマウスオーバーとマウスアウトのたびにフェッチされます。

迅速な返信ありがとうございます！

于 2011-05-25T16:23:33.457 に答える