(vertical gap) vertikaler Abstand zwischen List-Elementen

[blue]

Gegeben sind

eine s:List

<s:List id="pList" height="100%" width="100%" dataProvider="{ac}" itemRenderer="PListRenderer" change="pList_changeHandler(event)"/>

und ein s:ItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true">
	
	<mx:HBox id="back" width="100%" height="100%" horizontalGap="20"
			 backgroundColor="0x00000" 
			 backgroundAlpha="{( itemIndex % 2 ) * 0.1}">
		
		<mx:Image id="icon" source="{data.photo}"/>
		<mx:Label id="headline" text="{data.name}"/>
		
	</mx:HBox>
	
	
</s:ItemRenderer>

Wie kann man den vertikalen Abstand der List-Elemente bestimmen?

[Omega Psi]

Hol dir das Layout aus der Liste und setze dort die gap.

[Silver_Surfer]

Oder einfach die Größe (height ) des ItemRenderers festlegen..

[blue]

thx omega.

@Silver_Surfer: ich brauche das gap als echten Abstand, sonst muss ich im Renderer wieder tricksen, der widerum noch mehrfach andersweitig eingesetzt wird.

[Omega Psi]

Noch mal als Anmerkung:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                autoDrawBackground="true">

    <fx:Declarations>
        <s:SolidColor id="backgroundFill" color="#000000" alpha="{( itemIndex % 2 ) * 0.1}" />
    </fx:Declarations>

    <s:Group bottom="0" left="0" right="0" top="0" >
        <s:Rect bottom="0" fill="{backgroundFill}" left="0" right="0" top="0" />
        <s:HGroup id="back" bottom="0" gap="20" left="0" right="0" top="0">
            <s:BitmapImage id="icon" source="{data.photo}" />
            <s:Label id="headline" text="{data.name}" />
        </s:HGroup>
    </s:Group>

</s:ItemRenderer>

[blue]

omega, dein erster Ansatz ist der Bessere

	<s:List id="pagesList" width="100%" height="100%"  dataProvider="{ac}" itemRenderer="PListRenderer" change="pList_changeHandler(event)" skinClass="skins.PListSkin">
		
		<s:layout>
			<s:VerticalLayout gap="3"/>
		</s:layout>
		
	</s:List>

[Omega Psi]

Die beiden Ansätze korrelieren nicht miteinander. Der ItemRenderer kommt ohne dicke HBox aus. Darum ging es mir nur.

[blue]

... ich bin gerade erst dabei, mich mit den neuen Components anzufreunden ...

[Omega Psi]

Die kommen einem etwas komisch vor. Ich würde aber auf Spark setzen, die sind schlanker und am Ende besser zu customizen. Und im Hinblick auf das 4.5 Release, sollte man versuchen mx und spark nicht zu mischen, so hat man potenziell die Chance die mx.* Komponenten nicht laden zu müssen.

[blue]

Ja, das sieht schon gut aus, besonders wenn die Catalystmucke endlich bidirektional läuft. Nur - mein Projekt ist so gut wie durch )

und jetzt noch die Bonusfrage:

wie bringe ich das

<s:SolidColor id="backgroundFill" color="0#000000" alpha="0.1"/>

in einem *.css unter? Z.B.:

.pListRenderer {
    backgroundFill: 0#000000;
    alpha: 0.1;
}

[Omega Psi]

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                autoDrawBackground="true">

    <fx:Script>
        <![CDATA[
        public override function styleChanged(styleProp:String):void
        {
            super.styleChanged(styleProp);
            
            const allStyles:Boolean = !styleProp || styleProp == "styleName";

            if (allStyles || styleProp == "backgroundColor")
            {
                backgroundFill.color = getStyle("backgroundColor");
            }

            if (allStyles || styleProp == "backgroundAlpha")
            {
                backgroundFill.alpha = getStyle("backgroundAlpha");
            }
        }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:SolidColor id="backgroundFill" color="#000000" alpha="{( itemIndex % 2 ) * 0.1}" />
    </fx:Declarations>

    <s:Group bottom="0" left="0" right="0" top="0" >
        <s:Rect bottom="0" fill="{backgroundFill}" left="0" right="0" top="0" />
        <s:HGroup id="back" bottom="0" gap="20" left="0" right="0" top="0">
            <s:BitmapImage id="icon" source="{data.photo}" />
            <s:Label id="headline" text="{data.name}" />
        </s:HGroup>
    </s:Group>

</s:ItemRenderer>

<prefix>|<component>
{
    backgroundColor: #000000;
    backgroundAlpha: 1;
}

Prefix und Komponente musst du natürlich noch ersetzen.

[blue]

das muss ich mir morgen früh mal auf der Zunge zergehen lassen

nochmal danke und gn8