Flex 4.5 Button toggle 功能-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_10194/article/details/82100798

本文介绍如何使用Flex中的Button组件实现类似Checkbox的功能，通过切换选中状态改变按钮外观，达到模拟Checkbox的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Flex中，按钮有一个toggle功能

描述如下：我想用Button来模拟一个类似于Checkbox的check 和uncheck功能，即点击一下，check，否则unchecked。

mxml文件的内容如下：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplicationxmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx" width="300" minHeight="25"
        creationComplete="windowedapplication1_creationCompleteHandler(event)">
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            [Embed(source="btn_undone.png")]
            private var normalBtnSkin:Class;

[Embed(source="btn_checked.png")]
private var flagBtnSkin:Class;

            protected function statusButton_clickHandler(event:MouseEvent):void
            {
                //We we're checking the statusButton
                if(statusButton.selected){
                    statusButton.setStyle("selectedUpSkin",flagBtnSkin);
                    statusButton.setStyle("selectedDownSkin",flagBtnSkin);
                    statusButton.setStyle("selectedOverSkin",flagBtnSkin);
                }else{
                    statusButton.setStyle("skin",normalBtnSkin);
                }
                event.stopImmediatePropagation();
            }

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                statusButton.setStyle("skin",normalBtnSkin);
                statusButton.setStyle("selectedUpSkin",normalBtnSkin);
                statusButton.setStyle("selectedDownSkin",normalBtnSkin);
                statusButton.setStyle("selectedOverSkin",normalBtnSkin);
            }
        ]]>
    </fx:Script>


    <mx:Button toggle="true" id="statusButton " click="statusButton_clickHandler(event)"
               label="" left="10" width="20" height="19" top="3"/>
</s:WindowedApplication>