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

问题描述

我正在尝试添加 ButtonBar ，使用下面的代码：

CSS：

  @namespace slibrary：//ns.adobe.com/flex/spark; 
 
 s | ActionBar，s | ButtonBar {
 chromeColor：＃0066CC; 
颜色：#FFFFFF; 
 titleAlign：center; 
 
  

ActionScript： b

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

不幸的是，字体在按钮标签（在下面的屏幕截图的底部）看起来是浮雕的或模糊的：

请问有谁知道，如何再次使ButtonBar标签字体为 ？

我无法找到CSS设置。

更新：我已经搜索了AIR SDK的源代码（像ButtonBase.as，Label.as，ButtonBarSkin.as等文件），仍然无法找到答案。

所以我添加了一个模拟的测试用例+下面的一个截图以及这个问题的赏金。

$ b

TestApp.mxml：

 <？xml version =1.0encoding =utf-8？> 
  xmlns：s =library：//ns.adobe.com/flex/spark 
 applicationDPI =160> 
< fx：Style> 
 @namespace slibrary：//ns.adobe.com/flex/spark; 
 
 s | ActionBar，s | ButtonBar {
 chromeColor：＃0066CC; 
颜色：#FFFFFF; 
 titleAlign：center; 
} 
< / fx：样式> 
 
< fx：Script> 
<！[CDATA [
 import spark.events.IndexChangeEvent; 
导入spark.skins.mobile.TabbedViewNavigatorTabBarSkin; 
 
 private function handleTabs（event：IndexChangeEvent）：void {
 _tabs [2] .label = String（1 + _tabBar.selectedIndex）; 
 _tabs.refresh（）; 
} 
]]> 
< / fx：Script> 
< fx：声明> 
  source160dpi =@ Embed（'chat.png'）
 source240dpi =@ Embed（'chat.png'）
 source320dpi =@ Embed（'chat.png'）/> 
 
< s：ArrayCollection id =_ tabs> 
< fx：Object label =One/> 
< fx：Object label =Two/> 
 < / s：ArrayCollection> 
< / fx：声明> 
 
< 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：

解决方案

好的，我发现设置 textShadowAlpha 有助于：

  s | ActionBar，s | ButtonBar {
 chromeColor：＃0066CC; 
颜色：#FFFFFF; 
 titleAlign：center; 
 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屋！