我需要让用户切换spark数据网格中列和行之间的分隔线的可见性。我试图在它的皮肤类中创建一个方法（做一个新的皮肤类），如下所示：
<fx:Component id="columnSeparator">
<s:Line>
<fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
public function set columnSeperatorVisible(value:Boolean):void
{
if(value){
columnSeperatorLine.alpha = 1;
}
else{
columnSeperatorLine.alpha = 0;
}
}
]]>
</fx:Script>
<s:stroke>
<s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="columnSeperatorLine" />
</s:stroke>
</s:Line>
</fx:Component>
但我无法从实际皮肤的脚本块访问该方法，也无法使用
datagrid.skin.columnSeperatorVisible = false;
我不想制作4种不同的皮肤类，它们具有不同的分隔线可见性，我可以分配给datagird，所以我知道如何做到这一点吗？
我使用自定义皮肤：
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5" minWidth="89" minHeight="84" xmlns:skins="xxx.xxx.xxx.xxx">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 2.5
* @productversion Flex 4.5
*/
[HostComponent("spark.components.DataGrid")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Declarations>
<!--- @private -->
<fx:Component id="alternatingRowColorsBackground">
<s:Rect implements="spark.components.gridClasses.IGridVisualElement">
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
/**
* @private
*/
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const colors:Array = dataGrid.getStyle("alternatingRowColors");
if (colors && (colors.length > 0))
{
dataGrid.styleManager.getColorNames(colors); // lazily replace color names with ints
rowBackgroundFillColor.color = colors[rowIndex % colors.length];
}
else
{
// This should be the same as bgFill.color.
rowBackgroundFillColor.color = 0xFFFFFF;
}
}
]]>
</fx:Script>
<s:fill>
<!--- @private -->
<s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF"/>
</s:fill>
</s:Rect>
</fx:Component>
<!--- @private -->
<fx:Component id="caretIndicator">
<s:Rect implements="spark.components.gridClasses.IGridVisualElement">
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
/**
* @private
*/
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const color:uint = dataGrid.getStyle("caretColor");
caretIndicatorFill.color = color;
}
]]>
</fx:Script>
<s:stroke>
<!--- @private -->
<s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/>
</s:stroke>
</s:Rect>
</fx:Component>
<!--- @private -->
<fx:Component id="columnSeparator">
<s:Line>
<fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
public function set columnSeperatorVisible(value:Boolean):void
{
if(value){
columnSeperatorLine.alpha = 1;
}
else{
columnSeperatorLine.alpha = 0;
}
}
]]>
</fx:Script>
<s:stroke>
<s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="columnSeperatorLine" />
</s:stroke>
</s:Line>
</fx:Component>
<!---
Defines the appearance of the drop indicator.
The DataGrid's layout takes care to size and position the dropIndicator.
-->
<fx:Component id="dropIndicator">
<s:Group>
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<!--- Defines the color of the background. -->
<s:SolidColor color="0xBBBBBB" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x868686" weight="1"/>
</s:stroke>
</s:Rect>
</s:Group>
</fx:Component>
<!--- Defines the value of the columnSeparator property for the columnHeaderGroup. -->
<fx:Component id="headerColumnSeparator">
<s:Line>
<s:stroke>
<s:SolidColorStroke color="0xFFFFFF" weight="1" caps="square"/>
</s:stroke>
</s:Line>
</fx:Component>
<!--- Defines the value of the headerRenderer property for the columnHeaderGroup.
The default is spark.skins.spark.DefaultGridHeaderRenderer -->
<fx:Component id="headerRenderer">
<skins:AirDataGridHeaderRenderer/>
</fx:Component>
<!--- @private -->
<fx:Component id="hoverIndicator">
<s:Rect implements="spark.components.gridClasses.IGridVisualElement">
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
/**
* @private
*/
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const color:uint = dataGrid.getStyle("rollOverColor");
hoverIndicatorFill.color = color;
}
]]>
</fx:Script>
<s:fill>
<!--- @private -->
<s:SolidColor id="hoverIndicatorFill" color="0xCEDBEF"/>
</s:fill>
</s:Rect>
</fx:Component>
<!--- @private -->
<fx:Component id="rowSeparator">
<s:Line>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
public function set rowSeperatorVisible(value:Boolean):void
{
if(value){
rowSeperatorLine.alpha = 1;
}
else{
rowSeperatorLine.alpha = 0;
}
}
]]>
</fx:Script>
<s:stroke>
<s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="rowSeperatorLine"/>
</s:stroke>
</s:Line>
</fx:Component>
<!--- @private -->
<fx:Component id="selectionIndicator">
<s:Rect implements="spark.components.gridClasses.IGridVisualElement">
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
/**
* @private
*/
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const color:uint = dataGrid.getStyle("selectionColor");
selectionIndicatorFill.color = color;
}
]]>
</fx:Script>
<s:fill>
<!--- @private -->
<s:SolidColor id="selectionIndicatorFill" color="0xA8C6EE"/>
</s:fill>
</s:Rect>
</fx:Component>
<!--- @private -->
<fx:Component id="editorIndicator">
<s:Rect>
<s:fill>
<s:SolidColor color="0xFFFFFF"/>
</s:fill>
</s:Rect>
</fx:Component>
</fx:Declarations>
<fx:Script fb:purpose="styling">
<![CDATA[
import mx.events.FlexEvent;
static private const exclusions:Array = ["scroller", "background", "columnHeaderGroup"];
static private const contentFill:Array = ["bgFill"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override public function get contentItems():Array {return contentFill};
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if (getStyle("borderVisible") == true)
{
border.visible = true;
background.left = background.top = background.right = background.bottom = 1;
scroller.minViewportInset = 1;
}
else
{
border.visible = false;
background.left = background.top = background.right = background.bottom = 0;
scroller.minViewportInset = 0;
}
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
/* public function set rowSeperatorVisible(value:Boolean):void
{
var test:* = grid.rowSeparator.newInstance();
test.rowSeperatorVisible = value;
grid.rowSeparator = test as IFactory;
}
public function set columnSeperatorVisible(value:Boolean):void
{
var test:* = grid.columnSeparator.newInstance();
test.columnSeperatorVisible = value;
grid.columnSeparator = test as IFactory;
} */
]]>
</fx:Script>
<!-- column header, content -->
<s:VGroup horizontalAlign="justify" gap="0" left="0" right="0" top="0" bottom="0">
<!--- @private
The GridColumnHeaderGroup's padding values are used to line it up with the Grid
which is inset by the Scroller's minViewportInset, which provides room for the
DataGrid border - the last Rect element below.
-->
<s:GridColumnHeaderGroup id="columnHeaderGroup" minHeight="21"
paddingLeft="1" paddingRight="1" paddingTop="1"
columnSeparator="{headerColumnSeparator}"
headerRenderer="{headerRenderer}"/>
<s:Group height="100%">
<!--- @private -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1" >
<s:fill>
<!--- Defines the color of the background. The default color is 0xFFFFFF. -->
<s:SolidColor id="bgFill" color="#22A86D" />
</s:fill>
</s:Rect>
<!-- header separator, scroller and grid -->
<s:VGroup horizontalAlign="justify" height="100%" width="100%" gap="-1">
<!--- @private -->
<s:Line id="headerSeparator">
<s:stroke>
<s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
</s:stroke>
</s:Line>
<!--- @private -->
<s:Scroller id="scroller" minViewportInset="1" hasFocusableChildren="false" height="100%">
<!--- @private -->
<s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer">
<s:gridView>
<fx:Component>
<s:GridView>
<s:GridLayer name="backgroundLayer"/>
<s:GridLayer name="selectionLayer"/>
<s:GridLayer name="editorIndicatorLayer"/>
<s:GridLayer name="rendererLayer"/>
<s:GridLayer name="overlayLayer"/>
</s:GridView>
</fx:Component>
</s:gridView>
</s:Grid>
</s:Scroller>
</s:VGroup>
</s:Group>
</s:VGroup>
<!-- border -->
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border">
<s:stroke>
<!--- @private -->
<s:SolidColorStroke id="borderStroke" weight="1"/>
</s:stroke>
</s:Rect>
此代码会更改可见性
var overlayLayer:GridLayer = (this.grid.getChildByName('overlayLayer') as GridLayer);
if(overlayLayer){
overlayLayer.visible = Global.stringToBoolean(item.value);
}
答案 0 :(得分：3)
列和行分隔符位于网格的overlayLayer上。因此，切换其可见性的方法是：
var overlayLayer:GridLayer = dataGrid.grid.getChildByName('overlayLayer');
overlayLayer.visible = !overlayLayer.visible;
如果您使用自定义皮肤，请确保皮肤中存在overlayLayer。您可以从SDK外观中复制所有图层：
<s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer">
<s:GridLayer name="backgroundLayer"/>
<s:GridLayer name="selectionLayer"/>
<s:GridLayer name="editorIndicatorLayer"/>
<s:GridLayer name="rendererLayer"/>
<s:GridLayer name="overlayLayer"/>
</s:Grid>
对于SDK 4.10试试
DisplayObjectContainer(dataGrid.grid.getElementAt(0)).getChildByName('overlayLayer').visible = ...