柔性多行切换按钮栏

Posted 2021-02-25

Here's a very VERY rough but working implementation of a multi-line ToggleButtonBar component in Flex

package components
{
	import flash.display.DisplayObject;
	import flash.events.Event;
 
	import mx.containers.VBox;
	import mx.controls.ToggleButtonBar;
	import mx.events.FlexEvent;
	import mx.events.ItemClickEvent;
 
	/**
	 * @author Danny Kopping
	 * @link http://ria-coder.com
	 * 
	 * ==========================USAGE==========================
	 * <components:MultiLineToggleButtonBar id="mltbb" width="100%" selectedIndex="5" columns="2" 
						 barWidth="100%" barHeight="30" itemClick="trace(mltbb.selectedIndex)">
			<components:dataProvider>
				<mx:Array>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
					<mx:Object label="Label" icon="@Embed(source='/path/to/icon')/>
				</mx:Array>
			</components:dataProvider>
		</components:MultiLineToggleButtonBar>
	 */
 
	[Event(name="itemClick",type="mx.events.ItemClickEvent")]
	public class MultiLineToggleButtonBar extends VBox
	{
		private var _dataProvider:Array;
 
		[ArrayElementType("mx.controls.ToggleButtonBar")]
		private var toggleBars:Array;
 
		private var selectedBar:ToggleButtonBar;
		private var _selectedIndex:int = 0;
		private var _barWidth:Object;
		private var _barHeight:Object;
 
		public var columns:uint = 3;
 
		public function MultiLineToggleButtonBar()
		{
			super();
 
			toggleBars = [];
			addEventListener(Event.ADDED_TO_STAGE, setSelected);
		}
 
		public function get barWidth():Object
		{
			return _barWidth;
		}
 
		public function set barWidth(value:Object):void
		{
			_barWidth = value;
		}
 
		public function get barHeight():Object
		{
			return _barHeight;
		}
 
		public function set barHeight(value:Object):void
		{
			_barHeight = value;
		}
 
		public function get dataProvider():Array
		{
			return _dataProvider;
		}
 
		public function set dataProvider(value:Array):void
		{
			_dataProvider = value;
 
			createBars();
		}
 
		private function createBars():void
		{
			for each(var bar:ToggleButtonBar in toggleBars)
				removeChild(bar);
 
			var tbIndex:uint = 0;
			var counter:uint = 0;
			var current:ToggleButtonBar;
 
			for each(var item:Object in dataProvider)
			{
				if(counter % columns == 0)
				{
					current = new ToggleButtonBar();
					current.setStyle("horizontalGap", 6);
 
					current.dataProvider = dataProvider.slice(counter, counter + columns);
					toggleBars.push(addChild(current) as ToggleButtonBar);
 
					current.addEventListener(FlexEvent.CREATION_COMPLETE, updateSizes);
					current.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
				}
 
				counter++;
			}
		}
 
		private function updateSizes(event:FlexEvent):void
		{
			var current:ToggleButtonBar = event.target as ToggleButtonBar;
 
			if(barWidth.toString().indexOf("%") != -1)
				current.percentWidth = barWidth.toString().substr(0, barWidth.toString().length - 1);
			else
				current.width = Number(barWidth);
 
			if(barHeight.toString().indexOf("%") != -1)
				current.percentHeight = barHeight.toString().substr(0, barHeight.toString().length - 1);
			else
				current.height = Number(barHeight);
		}
 
		private function setSelected(event:Event):void
		{
			if(selectedIndex < 0)
				return;
 
			if(!toggleBars[Math.floor(selectedIndex / columns)])
				return;
 
			var selected:ToggleButtonBar = toggleBars[Math.floor(selectedIndex / columns)];
			selected.selectedIndex = selectedIndex % columns;
			deselectOthers(selected);	
		}
 
		public function get selectedIndex():int
		{
			return _selectedIndex;;
		}
 
		public function set selectedIndex(value:int):void
		{			
			_selectedIndex = value;
		}
 
		private function onItemClick(event:ItemClickEvent):void
		{
			deselectOthers(event.target as ToggleButtonBar);
			this.dispatchEvent(event);
		}
 
		private function deselectOthers(selected:ToggleButtonBar):void
		{
			this.selectedBar = selected;
 
			for each(var bar:ToggleButtonBar in toggleBars)
				if(bar !== selected)
				{
					for each(var child:* in bar.getChildren())
						child.selected = false;
				}
 
			selectedIndex = (toggleBars.indexOf(selected) * columns) + selected.selectedIndex;
		}
	}
}