Flex VBox边框

Question

如何在Flex VBox中添加边框？我的VBox是List的渲染器。我尝试了以下方法，但没有成功(特别是VBox的borderVisible="true" borderStyle="solid" borderColor="0x888888")：

 <mx:List id="myList" dataProvider="{myData}"
     width="100%" height="100%"
     variableRowHeight="true"
     verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
     <mx:itemRenderer>
         <mx:Component>
             <mx:VBox
                 width="100%" height="100%"
                 verticalScrollPolicy="off" horizontalScrollPolicy="off"
                 borderVisible="true" borderStyle="solid" borderColor="0x888888">
                 <mx:HBox width="100%">
                     <mx:Label id="firstNameLabel" text="{data.firstName}"/>
                     <mx:Label id="lastNameLabel" text="{data.lastName}"/>
                 </mx:HBox>
                 <mx:Text id="descriptionLabel" text="{data.description}"/>
             </mx:VBox>
         </mx:Component>
     </mx:itemRenderer>
 </mx:List>

Answer 1

Flex Container类上没有borderVisible样式或属性。

要查看边框，您需要设置borderStyle、borderColor和borderThickness样式。

为您的VBox尝试以下样式：

         <mx:VBox
             borderThickness="1" borderStyle="solid" borderColor="0x888888" ...>

             ...

         </mx:VBox>

Answer 2

在actionscript 3中：

private var _vbox:VBox;

...

this._vbox.setStyle("borderThickness", "1");
this._vbox.setStyle("borderStyle", "solid");
this._vbox.setStyle("borderColor", "0x888888");

Answer 3

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        private var myData:ArrayCollection = new ArrayCollection([
            {label:'a11',url: '../dol/assets/images/lalign.png', side:'left'},
            {label:'a323',url: '../dol/assets/images/calign.png', side:'center'},
            {label:'asdf45',url: '../dol/assets/images/ralign.png', side:'right'}]);
        ]]>
</mx:Script>
    <mx:List id="myList" dataProvider="{myData}"
     width="100%" height="100%"
     variableRowHeight="true"
     verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
     <mx:itemRenderer>
         <mx:Component>
             <mx:VBox width="100%" height="100%"
                 verticalScrollPolicy="off" horizontalScrollPolicy="off"
                 borderStyle="solid" borderColor="0x888888" borderThickness="3">
                 <mx:HBox width="100%">
                     <mx:Label id="firstNameLabel" text="{data.label}"/>
                     <mx:Label id="lastNameLabel" text="{data.url}"/>
                 </mx:HBox>
                 <mx:Text id="descriptionLabel" text="{data.side}"/>
             </mx:VBox>
         </mx:Component>
     </mx:itemRenderer>
 </mx:List>
</mx:Application>

borderVisible在flex中为nothing，请使用borderStyle=solid、borderThickness和borderColor属性显示边框