настраиваемые кнопки табуляции, мерцающие при наведении курсора мыши - PullRequest
Новая
       22

настраиваемые кнопки табуляции, мерцающие при наведении курсора мыши

0 голосов
/ 25 мая 2011

Я использую пользовательский скин на TabBar от Flex, и в частности скин для элементов управления 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» действительно устраняет мерцание «пулемета», которое возникало, когда мышь зависала над любым краем кнопки, но при каждом вводе и отпускании мыши на каждой кнопке все еще остается мерцание.

1 Ответ

0 голосов
/ 25 мая 2011

Понял:

Ключ был в том, чтобы установить источник BitmapImage с помощью метода @Embed. 

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

Я должен был помнить это по моим дням работы во Flash.Если аннотация Embed не используется, ресурс связывается и, следовательно, выбирается при каждом изменении состояния, т. Е. При наведении курсора мыши и при отсутствии мыши.

Спасибо за быстрые ответы!

...