Настройка компонента ComboBox

Компонент ComboBox можно изменять по горизонтали и по вертикали как во время разработки, так и при исполнении. При разработке выделите компонент в рабочей области и используйте инструмент «Свободное преобразование» или одну из команд «Модификация» > «Преобразовать». При исполнении используйте метод setSize() или любые применимые свойства класса ComboBox, например height и width , scaleX и scaleY .

Размер компонента ComboBox изменится в соответствии с указанной шириной и высотой. Размер списка изменится в соответствии с шириной компонента, если не задано свойство dropdownWidth .

Если текст не помещается по длине в поле со списком, он будет обрезан. Необходимо изменить размер поля со списком и задать свойство dropdownWidth , чтобы уместился текст.

Использование стилей для компонента ComboBox

Для изменения внешнего вида компонента ComboBox можно задать свойства стиля. Стили задают значения для обложек, средства отображения ячеек, внутренних полей и ширины кнопок компонента. Следующий пример задает стили buttonWidth и textPadding . Стиль buttonWidth задает ширину области попадания кнопки и действует, если компонент ComboBox является редактируемым и вы можете только нажать кнопку, чтобы развернуть раскрывающийся список. Стиль textPadding задает промежуток между внешней границей текстового поля и текстом. Это пригодится при центрировании текста по вертикали в текстовом поле, когда размер компонента ComboBox увеличивается по вертикали. В противном случае текст может отображаться вверху текстового поля.

  1. Создайте новый файл Flash (ActionScript 3.0).

  2. Перетащите компонент ComboBox в рабочую область и присвойте ему имя экземпляра aCb .

  3. Откройте панель «Действия», выберите Кадр 1 на основной временной шкале и введите следующий код: 

    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. Выберите «Управление» > «Тестировать ролик».

    Заметьте, что областью кнопки, которую вы можете нажать, чтобы открыть раскрывающийся список, является ограниченная область справа. Также обратите внимание на то, что текст отцентрирован по вертикали в текстовом поле. Можно попробовать выполнить пример без двух выражений setStyle() , чтобы увидеть эффект.

Использование обложек для компонента ComboBox

Компонент ComboBox использует следующие обложки для визуализации своих состояний.

Обложки компонента ComboBox

Можно изменить цвет обложки Up в рабочей области для изменения цвета компонента в неактивном состоянии.

  1. Создайте новый файл Flash (ActionScript 3.0).

  2. Перетащите компонент ComboBox в рабочую область.

  3. Дважды щелкните компонент, чтобы открыть палитру его обложек.

  4. Дважды щелкните обложку Up, чтобы выбрать ее и открыть для редактирования.

  5. Установите масштаб на 400 %.

  6. Щелкните мышью в центре обложки, чтобы ее цвет появился в палитре «Заливка» в Инспекторе свойств.

  7. В палитре «Заливка» выберите цвет #33FF99 для применения к обложке Up.

  8. Нажмите кнопку «Назад» в левой части панели правки над рабочей областью, чтобы вернуться в режим редактирования документа.

  9. Выберите «Управление» > «Тестировать ролик».

    Компонент ComboBox должен отображаться в рабочей области так, как показано на рисунке ниже.

    Компонент ComboBox с настроенным цветом обложки Background
    Компонент ComboBox с настроенным цветом обложки Background