Question

举个简单的例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
        import com.example.Tab;

        private function addSecondTab(event:Event):void {
            tabs.addChild(new Tab("Second"));
        }
    ]]>
</mx:Script>
<mx:TabNavigator id="tabs" width="100%" height="100%">
    <mx:VBox horizontalAlign="center" verticalAlign="middle" label="#1">
        <mx:Label text="test"/>
    </mx:VBox>
</mx:TabNavigator>
<mx:Button label="Add Second Tab" click="addSecondTab(event)" />
</mx:Application>


package com.example {
import mx.containers.VBox;
import mx.controls.Label;
import mx.events.FlexEvent;

public class Tab extends VBox {
    public function Tab(name:String) {
        label = name;

        setStyle("horizontal-align", "center");
        setStyle("vertical-align", "middle"); 
    }

    override protected function createChildren():void {
        super.createChildren();

        var box:VBox = new VBox();
        box.setStyle("border-style", "solid");
        box.setStyle("border-thickness", 1);
        box.setStyle("border-color", 0xFF0000);

        var l1:Label = new Label();
        l1.text = "Hello!";
        box.addChild(l1);

        var l2:Label = new Label();
        l2.setStyle("fontWeight", "bold");
        l2.text = "This is a line of text...";
        box.addChild(l2);

        addChild(box);
    }
}
}

为什么第二个标签内没有应用样式（边框和对齐）？

Answer 1

Flex仅支持CSS中的带连字符的样式名称。因此，在MXML或Actionscript语句中，您应该使用样式名称的驼峰案例版本：

horizontalAlign，verticalAlign，borderStyle等

您可以在Adobe documentation中详细了解它，尤其是CSS选择器名称上的section。

使用TabNavigator时如何对齐动态添加的选项卡的内容

1 个答案: