De component List aanpassen

U kunt een component List horizontaal en verticaal aanpassen tijdens het ontwerpen en bij uitvoering. Selecteer tijdens het ontwerpen de component in het werkgebied en gebruik het gereedschap Vrije transformatie of een van de opdrachten Wijzigen > Transformeren. Bij uitvoering kunt u de methode setSize() of de toepasbare eigenschappen van de klasse List gebruiken, zoals height en width , scaleX en scaleY .

Wanneer de grootte van een lijst wordt gewijzigd, worden de rijen horizontaal kleiner, waardoor de tekst erin wordt afgekapt. De lijst voegt rijen toe of verwijdert deze, waar nodig. Schuifbalken worden, indien nodig, automatisch geplaatst.

Stijlen gebruiken met de component List

U kunt stijleigenschappen instellen om de weergave van een component List te wijzigen. De stijlen geven waarden op voor de skins en opvulling van de component wanneer de component wordt getekend.

Met de verschillende stijlen van skins kunt u verschillende klassen opgeven die de skin kan gebruiken. Zie Skins voor meer informatie over het gebruik van skinstijlen.

In de volgende procedure wordt de waarde van de stijl contentPadding voor de component List ingesteld. De waarde van deze instelling wordt afgetrokken van de grootte van de List om de opvulling ronde de inhoud te bereiken, die u misschien nodig hebt om de grootte van de List vergroten om te voorkomen dat de tekst in de List wordt afgekapt.

  1. Maak een nieuw document van het type Flash-bestand (ActionScript 3.0).

  2. Sleep de component List van het deelvenster Componenten naar het werkgebied en geef deze de instantienaam aList .

  3. Selecteer frame 1 in de hoofdtijdlijn, open het deelvenster Handelingen en voer de volgende code  in, waarmee de stijl contentPadding wordt ingesteld en gegevens aan de List worden toegevoegd: 

    aList.setStyle("contentPadding", 5); 
aList.setSize(145, 200); 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.rowCount = aList.length;

  4. Selecteer Besturing > Film testen.

Skins gebruiken met de component List

De component List gebruikt de volgende skins om zijn visuele status te vertegenwoordigen:

Skins voor een List

Zie De component UIScrollBar aanpassen voor meer informatie over het toewijzen van een skin aan de ScrollBar. Zie De component TextArea aanpassen voor meer informatie over het toewijzen van de skin Focus Rect.

Opmerking: Het wijzigen van de skin ScrollBar in een component wijzigt deze voor alle andere componenten die de ScrollBar gebruiken.

Dubbelklik op de skin Cell Renderer om een tweede palet met skins te openen voor de andere toestanden van een cel in een List.

Skins voor een List Cell Renderer

U kunt de weergave van de cellen in de List wijzigen door deze skins te bewerken. In de volgende procedure wordt de kleur van de skin Up gewijzigd om de weergave van de List in de normale inactieve toestand te wijzigen.

  1. Maak een nieuw document van het type Flash-bestand (ActionScript 3.0).

  2. Sleep de component List van het deelvenster Componenten naar het werkgebied en geef deze de instantienaam aList .

  3. Dubbelklik op List om het palet met skins te openen.

  4. Dubbelklik op de skin Cell Renderer om het palet met skins van Cell Renderer te openen.

  5. Dubbelklik op de skin Up_Skin om deze te openen voor bewerking.

  6. Klik op het vulgebied van de skin om dit te selecteren. Een kleurkiezer voor de vulkleur wordt weergegeven in Eigenschapcontrole met de huidige vulkleur van de skin.

  7. Selecteer kleur #CC66FF in de kleurkiezer voor de vulkleur om deze toe te passen op de vulling van de skin Up_Skin.

  8. Klik op de knop Terug links van de bewerkbalk boven in het werkgebied om terug te gaan naar de documentbewerkmodus.

  9. Voeg de volgende code in het deelvenster Handelingen toe aan frame 1 van de tijdlijn om gegevens aan de List toe te voegen: 

    aList.setStyle("contentPadding", 5); 
aList.setSize(145, 200); 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.rowCount = aList.length;

  10. Selecteer Besturing > Film testen.

    De List wordt weergegeven als in de volgende afbeelding:

    Cellen List met aangepaste kleur Up_Skin
    Cellen List met aangepaste kleur Up_Skin

    Het kader is het resultaat van het instellen van de stijl contentPadding .