如何将图标移动到 flex 3 中 TabBar 标签的末尾答案

【问题标题】：How to move Icon to the end of TabBar's label in flex 3如何将图标移动到 flex 3 中 TabBar 标签的末尾
【发布时间】：2013-12-11 07:10:34
【问题描述】：

我是 Flex 的新手。如何将图标移动到 TabBar 标签的末尾。 TabBars 标签区域就像第一个图标图像，然后是标签文本。我想先有他们的标签，然后是图标图像。如何互换位置？

特别是当我单击图标时（仅在图标上不包括 TabBar 的标签），我想显示一个警告框。

请帮助我找到解决此问题的方法。提前致谢。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
      <![CDATA[
                    import mx.controls.Alert;

        [Bindable]
        [Embed(source="/assets/graphics/arrowRight.jpg")]                 
        public var myIcon1:Class;
        [Embed(source="/assets/graphics/btn_done_off.gif")]                 
        public var myIcon2:Class;
        [Embed(source="/assets/graphics/btn_exit_off.gif")]                 
        public var myIcon3:Class;
        [Embed(source="/assets/graphics/arrowRightBig.jpg")]                 
        public var myIcon4:Class;
        [Embed(source="/assets/graphics/question2.gif")]                 
        public var myIcon5:Class;





    ]]>
</mx:Script>
<mx:Spacer height="1000" >

</mx:Spacer>
<mx:TabNavigator width="50%" height="50%" >
    <mx:VBox id="one" label="one" icon="{myIcon1}" click="Alert.show('Tab1');" />
    <mx:VBox id="two" label="two" icon="{myIcon2}" click="Alert.show('Tab2');" />
    <mx:VBox id="three" label="three" icon="{myIcon3}" click="Alert.show('Tab3');" />
    <mx:VBox id="four" label="four" icon="{myIcon4}" click="Alert.show('Tab4');" />
    <mx:VBox id="five" label="five" icon="{myIcon5}" click="Alert.show('Tab5');" />
</mx:TabNavigator></mx:Application>

【问题讨论】：

标签： apache-flex flex3

【解决方案1】：

试试这个，

<mx:canvas creationComplete="init()">
            <mx:Script> <![CDATA[
                                import mx.controls.Alert;

                    [Bindable]
                    [Embed(source="/assets/graphics/arrowRight.jpg")]                 
                    public var myIcon1:Class;
                    [Embed(source="/assets/graphics/btn_done_off.gif")]                 
                    public var myIcon2:Class;
                    [Embed(source="/assets/graphics/btn_exit_off.gif")]                 
                    public var myIcon3:Class;
                    [Embed(source="/assets/graphics/arrowRightBig.jpg")]                 
                    public var myIcon4:Class;
                    [Embed(source="/assets/graphics/question2.gif")]                 
                    public var myIcon5:Class;

                    private function init():void {
                       var tab:Tab;
                       var len:uint = tabBar.numChildren;
                       for (i=0; i<len; i++) {
                           tab = tabBar.getChildAt(i) as Tab;
                           tab.labelPlacement = "left";
                        }
        ]]>
        </mx:Script>
        <mx:Spacer height="1000" >

        </mx:Spacer>
        <mx:TabNavigator id="tabBar" width="50%" height="50%" >
            <mx:VBox id="one" label="one" icon="{myIcon1}" click="Alert.show('Tab1');" />
            <mx:VBox id="two" label="two" icon="{myIcon2}" click="Alert.show('Tab2');" />
            <mx:VBox id="three" label="three" icon="{myIcon3}" click="Alert.show('Tab3');" />
            <mx:VBox id="four" label="four" icon="{myIcon4}" click="Alert.show('Tab4');" />
            <mx:VBox id="five" label="five" icon="{myIcon5}" click="Alert.show('Tab5');" />
        </mx:TabNavigator>
    </mx:canvas>

希望对你有帮助。

【讨论】：