Flex 移动应用程序中的样式 ButtonBar 字体 - 附有屏幕截图 [英] Styling ButtonBar font in Flex mobile app - with screenshot attached

问题描述

我正在尝试添加一个 ButtonBar 位于移动 Flex 应用程序底部，使用以下代码:

CSS:

@namespace s "library://ns.adobe.com/flex/spark";s|ActionBar, s|ButtonBar {铬颜色:#0066CC；颜色:#FFFFFF；标题对齐:居中；}

动作脚本:

<fx:Object label="Распасы"/><fx:Object label="Пуля" icon="{MONEY}"/><fx:Object label="10" icon="{CALL}"/></s:ArrayCollection></s:ButtonBar>

不幸的是，按钮标签处的字体看起来很模糊或模糊(在以下屏幕截图的底部):

有谁知道，如何使 ButtonBar 标签字体常规?

我找不到相应的 CSS 设置.

更新:我已经搜索了 AIR SDK 的源代码(像 ButtonBase.as、Label.as、ButtonBarSkin.as 等文件)，但仍然找不到答案.>

所以我要添加一个简化的测试用例 + 下面的另一个屏幕截图以及这个问题的赏金.

TestApp.mxml:

<fx:风格>@namespace s "library://ns.adobe.com/flex/spark";s|ActionBar, s|ButtonBar {铬颜色:#0066CC；颜色:#FFFFFF；标题对齐:居中；}</fx:风格><fx:脚本><![CDATA[导入 spark.events.IndexChangeEvent;导入 spark.skins.mobile.TabbedViewNavigatorTabBarSkin;私有函数 handleTabs(event:IndexChangeEvent):void {_tabs[2].label = String(1 + _tabBar.selectedIndex);_tabs.refresh();}]]></fx:脚本><fx:声明><s:MultiDPIBitmapSource id="CHAT"source160dpi="@Embed('chat.png')"source240dpi="@Embed('chat.png')"source320dpi="@Embed('chat.png')"/><s:ArrayCollection id="_tabs"><fx:Object label="One"/><fx:Object label="两个"/><fx:Object label="Three" icon="{CHAT}"/></s:ArrayCollection></fx:声明><s:ButtonBar id="_tabBar"要求选择=真"宽度="100%"底部=0"skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin"dataProvider="{_tabs}"更改 =handleTabs(事件)"></s:ButtonBar></s:应用程序>

chat.png:

解决方案

好吧，我发现设置 textShadowAlpha 有帮助:

s|ActionBar, s|ButtonBar {铬颜色:#0066CC；颜色:#FFFFFF；标题对齐:居中；textShadowAlpha: 0;}

还有 textShadowColor 可用并被 mobile/ActionBarSkin.as、mobile/ButtonSkin.as 和 mobile/supportClasses/ButtonSkinBase.as 使用

I'm trying to add a ButtonBar at the bottom of a mobile Flex app by using this code:

CSS:

@namespace s "library://ns.adobe.com/flex/spark";

s|ActionBar, s|ButtonBar {
    chromeColor: #0066CC;
    color: #FFFFFF;
    titleAlign: center;
}

ActionScript:

<s:ButtonBar requireSelection="true" 
             width="100%" 
             bottom="0" 
             skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin">
    <s:ArrayCollection>
        <fx:Object label="Распасы" />
        <fx:Object label="Пуля" icon="{MONEY}" />
        <fx:Object label="10" icon="{CALL}" />
    </s:ArrayCollection>
</s:ButtonBar>

Unfortunately the font looks emboiled or blurred at the button labels (at the bottom of the following screenshot):

Does anybody please know, how to make the ButtonBar label fonts regular again?

I can not find the CSS setting for that.

UPDATE: I've searched the source code of AIR SDK (files like ButtonBase.as, Label.as, ButtonBarSkin.as, etc.) and still can not find the answer.

So I'm adding a simlified test case + one more screenshot below and a bounty for this question.

TestApp.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               applicationDPI="160">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|ActionBar, s|ButtonBar {
            chromeColor: #0066CC;
            color: #FFFFFF;
            titleAlign: center;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
            import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;

            private function handleTabs(event:IndexChangeEvent):void {
                _tabs[2].label = String(1 + _tabBar.selectedIndex);
                _tabs.refresh();
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:MultiDPIBitmapSource id="CHAT" 
            source160dpi="@Embed('chat.png')"
            source240dpi="@Embed('chat.png')"
            source320dpi="@Embed('chat.png')" />

        <s:ArrayCollection id="_tabs">
            <fx:Object label="One" />
            <fx:Object label="Two" />
            <fx:Object label="Three" icon="{CHAT}" />
        </s:ArrayCollection>
    </fx:Declarations>

    <s:ButtonBar id="_tabBar"
                 requireSelection="true" 
                 width="100%" 
                 bottom="0"
                 skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin"
                 dataProvider="{_tabs}"
                 change="handleTabs(event)">
    </s:ButtonBar>

</s:Application>

chat.png:

解决方案

Alright, I've found that setting textShadowAlpha helps:

s|ActionBar, s|ButtonBar {
    chromeColor: #0066CC;
    color: #FFFFFF;
    titleAlign: center;
    textShadowAlpha: 0;
}

And there is also textShadowColor available and used by mobile/ActionBarSkin.as, mobile/ButtonSkin.as and mobile/supportClasses/ButtonSkinBase.as

这篇关于Flex 移动应用程序中的样式 ButtonBar 字体 - 附有屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！