Flex 用Grid实现类似于Html的细线表格

               

我们在用Flex进行开发的时候，有时候需要实现像html 细线表格的那种效果，原理很简单，但是需要一些技巧，不然的话很难控制线条的粗细，其实只需要设置几个样式就能搞定，一下是源码，大家可以运行一下看看效果<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    layout="absolute"> <mx:Style>Grid{border-style:solid;border-color:red;border-sides:right;horizontal-gap:1;vertical-gap:1; background-color:red;} GridItem{ background-color:white;} </mx:Style> <mx:Grid width="387" x="347" y="225">  <mx:GridRow width="100%">   <mx:GridItem width="50%">    <mx:Spacer width="50"/>   </mx:GridItem>   <mx:GridItem width="50%">    <mx:Spacer height="50"/>   </mx:GridItem>  </mx:GridRow>  <mx:GridRow width="100%">   <mx:GridItem width="50%">    <mx:Button label="Button"/>   </mx:GridItem>   <mx:GridItem width="50%">    <mx:Button label="Button"/>   </mx:GridItem>  </mx:GridRow>  <mx:GridRow width="100%">   <mx:GridItem width="50%">    <mx:Button label="Button"/>   </mx:GridItem>   <mx:GridItem width="50%">    <mx:Button label="Button"         borderColor="#CCCCCC"/>   </mx:GridItem>  </mx:GridRow> </mx:Grid></mx:Application>