AidLearning中使用Wizard布局python应用程序图形化界面

Aid-Helper
管理员
2020-03-27 12:01:13 2020-03-27 12:04:51浏览次数:

Wizard可以快速构建应用程序的图形化界面,下图是Wizard的工作区域介绍。

在这里插入图片描述

第一步:打开AidLearning中的Wizard工具。单击第一个Layout_H容器,选中容器,在右侧属性窗口中将容器高度css_height调整为300px,容器宽度css_width也调整为300px。容器的默认名称为hbox0。

在这里插入图片描述

第二步:给容器hbox0添加按钮控件button:选中图中的容器①,再点击②button按钮控件。

在这里插入图片描述

第三步:给button控件设置属性和事件:

  • ① Cannot append widgets to Button class. It is not a container. Select a container,意思是Button不是容器,不能在里面添加其他控件,只能选择它。
  • ② 选中Button按钮控件。
  • ③ 修改button控件显示的值为‘点我’。
  • ④ 修改button控件的颜色,可以滑动滑条也可以设置RGB值。
  • ⑤ 修改button控件的高度css_height为100px。
  • ⑥ 修改button控件的宽度css_width为100px。
  • ⑦ 为button添加第一个事件监听,第一个下拉框选app,必须是app。
  • ⑧ 为button添加第二个事件监听,第二个下拉框选onclick_button0,onclikc是单击事件,button0是button控件默认的value值。
    在这里插入图片描述

第三步:给容器hbox0添加按钮控件Label:选中图中的容器①,再点击②Label按钮控件。

在这里插入图片描述

第四步:给Label控件设置属性:

  • ① Cannot append widgets to Label class. It is not a container. Select a container,意思是Label不是容器,不能在里面添加其他控件,只能选择它。
  • ② 选中Label标签控件。
  • ③ 修改Label控件显示的文本为‘看这里’。
  • ④ 修改Label控件的高度css_height为100px。
  • ⑤ 修改Labe控件的宽度css_width为150px。
  • ⑥ 修改Labe控件的Font:css_color字体颜色,可以滑动滑条也可以设置RGB值。。
  • ⑦ 修改Labe控件的Font:css_font_size字体大小为16px。
  • ⑧ 修改Labe控件的Font:css_font_weight字体加粗显示。
  • ⑨ 修改Labe控件的Font:css_text_align字体的对齐方式center居中显示。
    在这里插入图片描述

第五步:保存界面设计为代码文件,点击File--Save Your App--Save as。这里保存到home文件下新建的Test文件夹下。

在这里插入图片描述 在这里插入图片描述

第六步:点击菜单栏的Code切换到代码编辑界面。

在这里插入图片描述

第七步:为onclick_button0按钮点击事件添加代码。

首先在construct_ui(函数的最后 hbox0.children['button0'].onclick.do(self.onclick_button0)的下一句添加: self.label0 = label0,目的是把局部变量label0复制给全局变量self.label0 。然后在onclick_button0监听事件中添加self.label0.text = 'Hello World!',在按钮单击后改变文本框显示的文字。

	def construct_ui(self):
	    hbox0.children['button0'].onclick.do(self.onclick_button0)
	    self.label0 = label0
    def onclick_button0(self, emitter):
         self.label0.text = 'Hello World!'

第八步:保存代码,点击Run,查看效果。

在这里插入图片描述

提示:必须先保存代码才能点击Code进入代码编辑界面,另外也可以在Wizard中用菜单栏中的Open打开保存好的py代码文件(用Wizard保存的python文件)再次回到python界面设计页面。也可以用ApkBuild将该py文件直接打包成apk。