有没有一种在 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 中获得三态复选框的好方法?的主要内容,如果未能解决你的问题,请参考以下文章
是否可以在 Microsoft TreeView Control 6.0 (MSComctlLib.TreeCtrl.2) 中模拟三态复选框?