Flex4 List项增加删除变色等简单实现

最新推荐文章于 2026-06-21 11:49:40 发布

原创最新推荐文章于 2026-06-21 11:49:40 发布 · 2.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Flex4 同时被 2 个专栏收录

19 篇文章

订阅专栏

WEB

12 篇文章

订阅专栏

本文介绍了一个使用Flex技术构建的任务管理应用实例。该应用包括任务创建、删除及颜色标记等功能，并通过MXML与ActionScript实现了交互。文章详细展示了如何利用List组件进行数据绑定及样式设置。

示例主要实现以下功能：

1、增加项。

2、删除项。

3、单选条目变色。

4、不选中无法操作。

Mxml如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  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[
  import com.XXX.model.Task;
  
  import mx.collections.ArrayCollection;
  
  [Bindable]
  private var _tasks:ArrayCollection = new ArrayCollection();
  
  private function createTask():void {
    _tasks.addItem(new Task(newTaskTI.text,""));
  }
  
  private function deleteSelectedTask():void {
    _tasks.removeItemAt(taskList.selectedIndex);
  }
	
  private function colorTask(color:String):void{
	  //_tasks.getItemAt(taskList.selectedIndex).
	  var _task:Task = _tasks.getItemAt(taskList.selectedIndex) as Task;
	  _task.color = color;
	  this.deleteSelectedTask();
	  _tasks.addItem(_task);
  }
	
  
]]>
</fx:Script>
  <s:Panel title="Todo List" width="100%" height="100%">
    <s:VGroup width="100%" height="100%">
      <s:HGroup width="100%" verticalAlign="middle">
        <s:Label text="New Task"/>
        <s:TextInput id="newTaskTI" width="100%"
          enter="createTask()"/>
        <s:Button label="Create" click="createTask()"/>
      </s:HGroup>
      <s:List id="taskList" width="100%" height="100%"
        labelField="name"
        dataProvider="{_tasks}">
		  <s:itemRenderer>
			 <fx:Component>
				 <s:ItemRenderer>
					 <fx:Script>
						 <![CDATA[
							 override public function set data(value:Object):void {
								 if(value!=null){
									 taskLabel.text = value.name;
									 taskLabel.setStyle("color",value.color);
								 }
						 }
						 ]]>
				     </fx:Script>
					 <s:Label id="taskLabel"  />
				 </s:ItemRenderer>
			 </fx:Component>
			  
		  </s:itemRenderer>
		</s:List>
      <s:HGroup width="100%">
        <s:Button label="Delete" width="100%" height="30"
          enabled="{taskList.selectedItem != null}"
          click="deleteSelectedTask()"/>
		<s:Button label="RedTask" width="100%" height="30"
				  enabled="{taskList.selectedItem != null}"
				  click="colorTask('red')"/>
		<s:Button label="YellowTask" width="100%" height="30"
				  enabled="{taskList.selectedItem != null}"
				  click="colorTask('yellow')"/>
		  <s:Button label="GreenTask" width="100%" height="30"
					enabled="{taskList.selectedItem != null}"
					click="colorTask('green')"/>
		  <s:Button label="BlueTask" width="100%" height="30"
					enabled="{taskList.selectedItem != null}"
					click="colorTask('blue')"/>  
      </s:HGroup>
    </s:VGroup>
  </s:Panel>
</s:Application>

AS编写Model

package com.XXX.model {
  public class Task {
    [Bindable]
    public var name:String;
	public var color:String;
	
	public function Task(name:String ,color:String) {
		this.name = name;
		this.color = color;
	}
  }
}