De component ComboBox aanpassen

U kunt een component ComboBox 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 ComboBox gebruiken, zoals height en width , scaleX en scaleY .

De ComboBox verandert van grootte zodat de opgegeven hoogte en breedte passen. De lijst verandert van grootte om overeen te komen met de breedte van de component, tenzij de eigenschap dropdownWidth is ingesteld.

Wanneer de tekst te lang is voor de ComboBox, wordt de tekst op maat geknipt. U moet de grootte van de ComboBox aanpassen en de eigenschap dropdownWidth instellen zodat de tekst past.

Stijlen gebruiken met de component ComboBox

U kunt stijleigenschappen instellen om de weergave van een component ComboBox te wijzigen. De stijlen geven waarden op voor de skins, celrenderer, opvulling en knopbreedte van de component. In het volgende voorbeeld worden de stijlen buttonWidth en textPadding ingesteld. De stijl buttonWidth stelt de breedte van het raakgebied van de knop in en wordt gebruikt wanneer de ComboBox bewerkbaar is en u alleen op de knop kunt drukken om de vervolgkeuzelijst te openen. De stijl textPadding geeft de hoeveelheid ruimte op tussen de buitenste randen van het tekstveld en de tekst. Het is nuttig voor het verticaal centreren van de tekst in het tekstveld wanneer u de ComboBox hoger maakt. Anders zou de tekst bovenin het tekstveld worden weergegeven.

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

  2. Sleep een component ComboBox naar het werkgebied en geef deze de instantienaam aCb .

  3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voer de volgende code in: 

    import fl.data.DataProvider; 
 
aCb.setSize(150, 35); 
aCb.setStyle("textPadding", 10); 
aCb.setStyle("buttonWidth", 10); 
aCb.editable = true; 
 
var items:Array = [ 
{label:"San Francisco", data:"601 Townsend St."}, 
{label:"San Jose", data:"345 Park Ave."}, 
{label:"San Diego", data:"10590 West Ocean Air Drive, Suite 100"}, 
{label:"Santa Rosa", data:"2235 Mercury Way, Suite 105"}, 
{label:"San Luis Obispo", data:"3220 South Higuera Street, Suite 311"} 
]; 
aCb.dataProvider = new DataProvider(items);

  4. Selecteer Besturing > Film testen.

    Het gebied van de knop waarop u kunt klikken om de vervolgkeuzelijst te openen is slechts een smal gedeelte aan de rechterkant. De tekst is verticaal gecentreerd in het tekstveld. U kunt het voorbeeld testen zonder de twee instructies setStyle() om hun effect te zien.

Skins gebruiken met de ComboBox

De ComboBox gebruikt de volgende skins om zijn visuele status te vertegenwoordigen.

Skins van een ComboBox

U kunt de kleur van de skin Up wijzigen om de kleur van de component in de inactieve toestand in het werkgebied te wijzigen.

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

  2. Sleep de component ComboBox naar het werkgebied.

  3. Dubbelklik erop om het palet met skins te openen.

  4. Dubbelklik op de skin Up tot deze is geselecteerd en open voor bewerking.

  5. Stel het zoombesturingselement in op 400%.

  6. Klik op het middengebied van de skin tot de kleur ervan in de kleurkiezer voor de vulkleur in Eigenschapcontrole wordt weergegeven.

  7. Selecteer kleur #33FF99 met behulp van de kleurkiezer voor de vulkleur om het op de skin Up toe te passen.

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

  9. Selecteer Besturing > Film testen.

    De ComboBox wordt weergegeven in het werkgebied, zoals in onderstaande afbeelding wordt getoond.

    ComboBox met aangepaste kleur voor skin Background
    ComboBox met aangepaste kleur voor skin Background