如何在 flex 3 中将图标移动到选项卡栏标签的末尾

Question

我是Flex的新手。如何将图标移动到选项卡标签的末尾。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>

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

希望能有所帮助。