Flash/Flex学习笔记(3):动态添加组件

简介: Flash中一个fla文件可以关联到一个as文件,这个有点类似于asp.net中的code behind. 可参考以下图操作:     注:1.as文件的类名与文件名要求一样,并且默认情况下必须与fla处于同一目录。

Flash中一个fla文件可以关联到一个as文件,这个有点类似于asp.net中的code behind.

可参考以下图操作:
img_79f8a903beadc22ff84ea3834327e1d6.jpg

 

img_aa5f83e740c606fba565d38d93e6d7a7.jpg

 

img_bfdb5ebc5952cb7c9c9aa3dc5d83e337.jpg

注:
1.as文件的类名与文件名要求一样,并且默认情况下必须与fla处于同一目录。
2.所有as文件必须继承自flash.display.Sprite

下面这个是一个示例文件代码:

package {
	
	import flash.display.Sprite;
	import fl.controls.Label;
	import fl.controls.Button;	
	import fl.controls.List;
	import flash.text.TextFieldAutoSize;
	import flash.events.MouseEvent;
	import fl.data.DataProvider;

	public class AddControlCode extends Sprite {
		public function AddControlCode() {
			
			//加一个label
			var _label:Label = new Label();
			_label.text="来来,我是一个Label";
			_label.width=150;
			_label.autoSize=TextFieldAutoSize.CENTER;
			_label.addEventListener(MouseEvent.CLICK,function(){trace(_label.text = "文本被点击了")}); //象不象c#中的匿名函数?
			this.addChild(_label);

			//加一个Button
			var _btn:Button = new Button();
			_btn.label="来来,我是一个Button";
			_btn.width=150;
			this.addChild(_btn);

			//获取舞台尺寸
			var w:int=stage.stageWidth;
			var h:int=stage.stageHeight;

			trace("宽度:" + w + ",高度:" + h);

			//将Label与Button移动到水平中心点
			_label.move((w-_label.width)/2,10);
			_btn.move((w-_btn.width)/2,50);

			_btn.addEventListener(MouseEvent.CLICK,btnClick);//给Button添加点击事件
			
			//添加一个List控件
			var _lst:List = new List();
			var dp:Array = new Array();
			var i:uint;
			var count:uint = _lst.rowCount * 2;
			for(i=0;i<count;i++){
				dp.push({label:"元素" + i});
			}
			_lst.allowMultipleSelection = true;//允许多选
			_lst.dataProvider = new DataProvider(dp);//绑定数据源
			this.addChild(_lst);
		}
		
		//鼠标点击处理函数
		function btnClick(e:MouseEvent) {
			trace("你点了我一下,这是证据:" + e);
		}
	}
}

 

默认情况下,如果您运行这段代码会发现根本没办法编译通过,通常会提示: 未发现fl.controls.Label之类,解决办法:

先在设计视图中,拖一个Label控件到舞台上,然后再删除就行了,其它组件类似处理

个人猜测:就好比Winform中,我们引用某命名空间时,通常光using ...后,还需要添加对某程序集的引用,类似的:fla默认可能没有添加fl.controls.Label的"程序集"引用,哪怕你在代码中import过了,但是运行时仍然找不到这个包,而手动拖一个到舞台上后,强迫flash自动添加了相关引用

最后一个问题:如果组件不全是动态添加的,比如在设计视图下直接把一个Label拖动舞台上,在对应的as文件中如何引用呢? 

其实也很简单,只要在设计视图中给组件指定一个实例名(比如lbl123),然后就能在as文件中直接用lbl123.text = "..."来使用了

运行截图:
img_27757f6c463481a83e83d48ca19ed228.jpg

目录
相关文章
|
开发者 容器
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
Flex组件用于创建弹性布局,开发者可以通过Flex的接口创建容器组件,进而对容器内的其他元素进行弹性布局,例如:使三个元素在容器内水平居中,垂直等间隔分散。 例如:如下的布局代码分别表示:(垂直排列,水平居中,垂直居中)
614 0
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
|
10月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
405 10
|
11月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
152 4
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
315 5
|
容器 API UED
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
432 0
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
|
容器
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
151 0
|
前端开发 Java 开发工具
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
469 0
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
|
开发框架 小程序 开发工具
APICloud AVM框架列表组件list-view的使用、flex布局教程
avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致。
336 0
APICloud AVM框架列表组件list-view的使用、flex布局教程
好客租房116-flex布局组件导航菜单
好客租房116-flex布局组件导航菜单
152 0
好客租房116-flex布局组件导航菜单