有没有一种在 flex 中获得三态复选框的好方法?

Posted

技术标签:

【中文标题】有没有一种在 flex 中获得三态复选框的好方法?【英文标题】:Is there a good way to get a tri-state checkbox in flex? 【发布时间】:2010-11-16 15:55:44 【问题描述】:

我在互联网上进行了很好的翻找,似乎找不到任何三态复选框的示例。 SDK 似乎不支持它,我在网上找不到任何示例。

我想这是一个常见的问题,在我开始编写自己的代码之前,有没有人知道我可以在某个地方使用一个好的 flex 三态复选框组件:)

干杯,

贾瓦切。

【问题讨论】:

【参考方案1】:

在 Flex Cookbook 上发布了一个示例 here。您可以使用此代码轻松创建自己的组件。

【讨论】:

请注意,此 3 状态的自定义小部件不支持辅助功能。【参考方案2】:

对于后来遇到此问题的其他人,我制作了自己的自定义组件,它只是隐藏了第三状态的复选框,并将其替换为看起来像第三状态中的复选框的图像。这很容易实现:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
    <![CDATA[
        public static const BOX_CHECKED:int = 1;
        public static const BOX_REJECTED:int = -1;
        public static const BOX_UNCHECKED:int = 0;
        [Bindable] public var boxVisible:Boolean = true;
        [Bindable] public var enum_id:int = -1;
        protected function checkbox_clickHandler(event:MouseEvent):void
        
            if(!checkbox.selected)
                boxVisible = false;             
        

        protected function image_clickHandler(event:MouseEvent):void
        
            boxVisible = true;              
        

        public function set label(str:String):void 
            checkbox.label = str;
            xLabel.text = str;
        

        public function get boxState():int 
            if(checkbox.selected)
                return BOX_CHECKED;
            else if(redX.visible)
                return BOX_REJECTED;

            return BOX_UNCHECKED;
        
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:CheckBox id="checkbox" click="checkbox_clickHandler(event)" visible="boxVisible" includeInLayout="boxVisible"/>
<s:HGroup>
    <s:Image id="redX" source="@Embed('assets/icons/redX.png')"
          
         click="image_clickHandler(event)" 
         visible="!boxVisible" includeInLayout="!boxVisible"/>
    <s:Label id="xLabel" visible="!boxVisible" includeInLayout="!boxVisible" paddingTop="4"/>
</s:HGroup>

</s:Group>

【讨论】:

谢谢!不错,简单的解决方案。【参考方案3】:

这是我自己的版本,灵感来自 James 的版本。您可以启用/禁用三态以获得具有相同组件的经典复选框,并且使用的机制有点不同,样板更少。嵌入图片为here。 使用风险自负! :)

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            // STATES :
            /** The intermediate state value. */
            public static const INTERMEDIATE:int = -1;
            /** The unchecked state value. */
            public static const UNCHECKED:int = 0;
            /** The checked state value. */
            public static const CHECKED:int = 1;


            // TRISTATE :
            private var _isTristate:Boolean;
            /** Whether this checkbox is tristate or a normal checkbox. */
            [Bindable] public function get isTristate():Boolean  return _isTristate; 
            public function set isTristate(value:Boolean):void 
                _isTristate = value;
                if(!_isTristate && state == INTERMEDIATE) 
                    state = UNCHECKED;
            


            // LABEL :
            /** The checkbox label. */
            [Bindable] public var label:String;


            // STATE CHANGE :

            private var _state:int;
            /** The current state of the box. */
            public function get state():int  return _state; 
            public function set state(value:int):void 
                _state = value;
                switch(_state) 
                    case INTERMEDIATE:
                        if(!_isTristate)
                            throw new Error("Setting state to INTERMEDIATE on a non tristate checkbox !");
                        tristateImg.visible = true;
                        checkbox.selected = false;
                        break;

                    case UNCHECKED:
                        tristateImg.visible = false;
                        checkbox.selected = false;
                        break;

                    case CHECKED:
                        tristateImg.visible = false;
                        checkbox.selected = true;
                        break;
                
            

            /**
             * Simply sets the state according to the current state.
             */
            protected function changeState(ev:Event):void 
                if(isTristate) ev.preventDefault();
                switch(state) 
                    case INTERMEDIATE: state = CHECKED; break;
                    case UNCHECKED: state = isTristate ? INTERMEDIATE : CHECKED; break;
                    case CHECKED: state = UNCHECKED; break;
                
            

            /**
             * Initial state.
             */
            protected function init():void 
                state = UNCHECKED;
            

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:layout>
        <s:BasicLayout />
    </s:layout>

    <s:CheckBox id="checkbox" label="label"
                change="changeState(event)"/>
    <s:Image id="tristateImg"
             mouseEnabled="false" mouseChildren="false"
             source="@Embed('assets/icons/tristate_checkbox.png')"
             x="2" y="5" />

</s:Group>

【讨论】:

【参考方案4】:

看看http://srinichekuri.wordpress.com/2011/05/20/3-state-checkbox-for-headerrenderer-in-datagrid/。

它有 3 状态复选框的代码。

【讨论】:

以上是关于有没有一种在 flex 中获得三态复选框的好方法?的主要内容,如果未能解决你的问题,请参考以下文章

初始化 Nativescript Vue App 的好方法

Java 中的三态复选框

是否可以在 Microsoft TreeView Control 6.0 (MSComctlLib.TreeCtrl.2) 中模拟三态复选框?

在android上创建一个三态复选框

如何获得带有选择/取消选择所有功能和不确定值的 angular.js 复选框?

有没有一种在 Angular 7 中嵌入 iframe 的安全方法?