【问题标题】:Styling ButtonBar font in Flex mobile app - with screenshot attachedFlex 移动应用程序中的 ButtonBar 字体样式 - 附有屏幕截图
【发布时间】:2013-07-31 06:52:13
【问题描述】:

我正在尝试使用以下代码在移动 Flex 应用的底部添加 ButtonBar

CSS:

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

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

动作脚本:

<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>

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

有没有人知道,如何让 ButtonBar 标签字体再次常规

我找不到它的 CSS 设置。

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

所以我在下面添加了一个简化的测试用例 + 另一个屏幕截图和这个问题的赏金。

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:

【问题讨论】:

    标签: apache-flex flex4 flex-mobile buttonbar flex4.7


    【解决方案1】:

    好的,我发现设置 textShadowAlpha 有帮助:

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

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

    【讨论】:

    • +1 这个,现在我已经看到了你的解决方案,这让我想起了我遇到同样问题的时候。
    猜你喜欢
    • 1970-01-01
    • 2012-10-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-17
    • 1970-01-01
    • 2016-03-04
    相关资源
    最近更新 更多