flex GRID绘制表格类似HTML的Table的简单实现

来源：互联网发布：奢侈品价格查询软件编辑：程序博客网时间：2024/05/17 08:13

flex绘制表格用的是 grid 控件，可以实现像html的表格的样子，当然写法和html类似，只是名字不同：

grid——table

GridRow——tr

GridItem——td

效果如图所示：

直接复制就能运行。直接看代码很简单不用解释：

CSS样式

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

mx|Grid
{
borderStyle: solid;
horizontalGap:-1;
verticalGap:-1;
paddingLeft:-1;
paddingTop:-1;
paddingRight:-1;
paddingBottom:-1;

}

mx|GridItem{
borderStyle: solid;
horizontalAlign: center;
verticalAlign: middle;
paddingTop:-1;
paddingBottom:-1;

}

主类：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style source="cc.css"/>
<fx:Declarations>
  
</fx:Declarations>

<fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  mx|Grid{

  }

</fx:Style>

<s:Panel left="5" right="5" top="5" bottom="5">
  <s:Button x="88" top="10" label="添加一行"/>
  <s:Button left="10" top="10" label="开始抽题"/>
  <s:BorderContainer left="10" right="10" top="39" bottom="30" cornerRadius="5">


   <mx:Grid top="10" horizontalCenter="0">
    <mx:GridRow width="100%" height="40" id="ijjj">
     <mx:GridItem width="60">
      <s:Label text="科目"/>
     </mx:GridItem>
     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="300" colSpan="2">
      <s:Label text="请输入题目个数"/>
     </mx:GridItem>


     <mx:GridItem width="60">
     </mx:GridItem>
    </mx:GridRow>


    <mx:GridRow width="100%" height="40">

     <mx:GridItem width="60" height="133" rowSpan="3">
      <s:Label text="选题"/>
     </mx:GridItem>
     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="60">
     </mx:GridItem>
    </mx:GridRow>


    <mx:GridRow width="100%" height="40">

     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="60">
     </mx:GridItem>
    </mx:GridRow>

    <mx:GridRow width="100%" height="40">

     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="150">
     </mx:GridItem>
     <mx:GridItem width="60">
     </mx:GridItem>
    </mx:GridRow>
   </mx:Grid>




  </s:BorderContainer>
</s:Panel>

</s:WindowedApplication>