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

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>