在 ButtonBar 中使用嵌入的图像答案

【问题标题】：Using Embedded Images in a ButtonBar在 ButtonBar 中使用嵌入的图像
【发布时间】：2014-02-13 19:23:11
【问题描述】：

在 actionscript 的按钮栏中使用嵌入图像的最佳方式是什么？我们目前有以下按钮栏，它附加到一个文本区域，一旦您选择该文本区域就可以看到：

    <mx:ButtonBar id="textEdits"
              x="0" y="-20"
              doubleClickEnabled="false" includeInLayout="{model.textSelected}"
              itemClick="{handleTextEditClick(event);}" buttonHeight="20" buttonWidth="20" visible="{model.textSelected}">
    <mx:dataProvider>
        <mx:Array>
            <mx:Object icon="@Embed(source='/assets/icons/edit.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/bold.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/italic.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/underline.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/left.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/center.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/right.png')" />
            <mx:Object icon="@Embed(source='/assets/icons/justify.png')" />
        </mx:Array>
    </mx:dataProvider>
</mx:ButtonBar>

这工作得很好，但我们正在经历架构更改并将按钮栏从单击事件（触发可以访问 mxml 文件）移动到鼠标悬停事件（完全在动作脚本中处理）。因此需要将按钮栏转换为动作脚本。以下是我们目前所拥有的：

        private var images:Array;
    private const IMAGE_COUNT:uint = 8;

    [Embed(source = '/assets/icons/edit.png')]
    private var Image0:Class;

    [Embed(source = '/assets/icons/bold.png')]
    private var Image1:Class;

    [Embed(source = '/assets/icons/italic.png')]
    private var Image2:Class;

    [Embed(source = '/assets/icons/underline.png')]
    private var Image3:Class;

    [Embed(source = '/assets/icons/left.png')]
    private var Image4:Class;

    [Embed(source = '/assets/icons/center.png')]
    private var Image5:Class;

    [Embed(source = '/assets/icons/right.png')]
    private var Image6:Class;

    [Embed(source = '/assets/icons/justify.png')]
    private var Image7:Class;

    public function createButtonBar():void
    {

        images = new Array(Image0, Image1, Image2, Image3, Image4, Image5, Image6, Image7);

        textEdits = new ButtonBar();
        textEdits.dataProvider = images;
        textEdits.id = "textEdits";
        textEdits.x = myTextarea.x;
        textEdits.y = myTextarea.y - 20;
        textEdits.includeInLayout = true;
        textEdits.visible = true;
        textEdits.height = 
        addChild(textEdits);

        textEdits.addEventListener(MouseEvent.MOUSE_OVER, activateButton);
        textEdits.addEventListener(MouseEvent.MOUSE_OUT, deactivateButton);
        textEdits.addEventListener(ItemClickEvent.ITEM_CLICK, handleTextEditClick);
    }

我们遇到的问题是按钮栏创建得很好，但没有任何图像。这就是我们得到的：

对此的任何帮助将不胜感激。

克里斯

【问题讨论】：

每个嵌入的图像都需要实例化，因为它们现在是唯一的类引用，而不是显示对象本身。如果没有看到 ButtonBar 的代码是什么样子，我想您要么没有实例化它们，要么没有将它们添加到 DisplayList。

标签： actionscript-3 apache-flex flex3

【解决方案1】：

试试这个，你还需要设置iconField 属性，你的图像数组应该是这样的

images = [{icon:Image0}, {icon:Image1}, {icon:Image2}, {icon:Image3}, {icon:Image4}, {icon:Image5} , {icon:Image6}, {icon:Image7}];


textEdits.iconField = "icon";

【讨论】：

【解决方案2】：

像这样更改图像定义

images = [{icon: Image0}, {icon: Image1},
          {icon: Image2}, {icon: Image3},
          {icon: Image4}, {icon: Image5},
          {icon: Image6}, {icon: Image7}];

【讨论】：