Dostosowywanie składnika List

Składnik List można przekształcać w poziomie i w pionie podczas tworzenia i w czasie wykonywania. W tym celu podczas tworzenia należy wybrać na stole montażowym składnik i użyć narzędzia Przekształcenie swobodne lub dowolnego z poleceń Modyfikuj > Przekształć. W czasie wykonywania należy używać metody setSize() i odpowiednich właściwości klasy List takich, jak height , width , scaleX czy scaleY .

Podczas zmiany rozmiaru listy w poziomie wiersze listy są zmniejszane, przycinając znajdujący się w nich tekst. W pionie w razie konieczności do listy dodawane do niej lub usuwane są z niej wiersze. W razie konieczności automatycznie umieszczane są także paski przewijania.

Używanie stylów ze składnikiem List

Właściwości stylu można ustawiać w celu zmiany wyglądu składnika List. Style określają wartości dla karnacji składnika i wypełnienia podczas rysowania składnika.

Różne style karnacji umożliwiają określenie innych klas do użytku dla karnacji. Więcej informacji na temat używania stylów karnacji zawiera sekcja Informacje o karnacjach .

Poniższa procedura ustawia wartość stylu contentPadding dla składnika List. Należy zauważyć, że wartość tego ustawienia pobierana jest z rozmiaru składnika List w celu otrzymania wypełnienia wokół zawartości, dlatego konieczne może być zwiększenie rozmiaru składnika List, aby zapobiec przycinaniu w nim tekstu.

  1. Utwórz nowy plik z dokumentem Flash (ActionScript 3.0).

  2. Przeciągnij składnik List z panelu Składniki na stół montażowy i nadaj nazwę instancji aList .

  3. Zaznacz klatkę nr 1 na głównej osi czasu, otwórz panel Operacje i wprowadź następujący kod, który ustawia styl contentPadding i dodaje dane do składnika List: 

    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. Wybierz polecenie Sterowanie > Testuj film.

Używanie karnacji ze składnikiem List

Składnik List używa poniższych karnacji w celu zaprezentowania swoich graficznych stanów:

Karnacje składnika List

Więcej informacji na temat nakładania karnacji dla ScrollBar zawiera sekcja Dostosowywanie składnika UIScrollBar . Więcej informacji na temat nakładania karnacji dla karnacji Focus Rect zawiera sekcja Dostosowywanie składnika TextArea .

Uwaga: Zmiana karnacji ScrollBar w jednym składniku powoduje zmianę we wszystkich pozostałych składnikach, które korzystają ze ScrollBar.

Kliknij dwukrotnie karnację Cell Renderer, aby otworzyć drugą paletę karnacji dla innych stanów komórki składnika List.

Karnacje Cell Renderer składnika List

Wygląd komórek składnika List można zmienić, edytując karnacje. Poniższa procedura powoduje zmianę koloru karnacji Up w celu zmiany wyglądu składnika List w jego normalnym nieaktywnym stanie.

  1. Utwórz nowy plik z dokumentem Flash (ActionScript 3.0).

  2. Przeciągnij składnik List z panelu Składniki na stół montażowy i nadaj nazwę instancji aList .

  3. Kliknij składnik List dwukrotnie, aby otworzyć jego paletę karnacji.

  4. Kliknij dwukrotnie karnację Cell Renderer, aby otworzyć paletę karnacji Cell Renderer.

  5. Kliknij dwukrotnie karnację Up_Skin, aby otworzyć ją do edycji.

  6. Kliknij obszar wypełnienia karnacji, aby go zaznaczyć. W Inspektorze właściwości wyświetlony powinien zostać wybierak Koloru wypełnienia z bieżącym kolorem wypełnienia karnacji.

  7. Wybierz kolor #CC66FF za pomocą wybieraka Koloru wypełnienia w celu zastosowania go do wypełnienia karnacji Up_Skin.

  8. Kliknij przycisk Wstecz po lewej stronie paska edycji nad stołem montażowym, aby powrócić do trybu edycji dokumentu.

  9. Dodaj poniższy kod do panelu Operacje w klatce nr 1 na osi czasu, aby dodać dane do składnika List: 

    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. Wybierz polecenie Sterowanie > Testuj film.

    Składnik List powinien zostać wyświetlony tak, jak zostało to przedstawione na poniższej ilustracji:

    Komórki składnika List z niestandardowym kolorem Up_Skin
    Komórki składnika List z niestandardowym kolorem Up_Skin

    Obramowanie wynika z ustawienia contentPadding stylu.