stm32 TouchGFX基础教程(五)使用文本和字体

TouchGFX Designer是给单片机这种内存资源紧张的硬件平台生成图形界面的,非常注重资源的优化利用,再加上TouchGFX采用的是静态内存分配方法,导致在TouchGFX Designer里使用文本资源的时候与我们平常的习惯不一样,下面就介绍一下如何使用文本和字体。
一、使用Single Use
1、 新建一个项目,随意填充背景色,并添加一个Button With Label控件,效果如图stm32 TouchGFX基础教程(五)使用文本和字体_第1张图片
2、打开文本资源管理标签,可以看到三个次级标签:Single UseResourcesTypographiesstm32 TouchGFX基础教程(五)使用文本和字体_第2张图片
在touchgfx designer里,凡是需要在屏幕上显示出来的文本,比如按钮上显示的文本,文本框里显示的文本,都需要用文本资源管理器来管理。但在使用文本前需要先在Typographies里定义文本将要使用的样式、大小等。比如我们添加添加一个楷体的样式,如图stm32 TouchGFX基础教程(五)使用文本和字体_第3张图片
3、 切换回画布Canvas,选中按钮,在右侧属性栏就可以使用刚才创建的字体样式了stm32 TouchGFX基础教程(五)使用文本和字体_第4张图片
再切换回文本资源管理器,在Single Use一栏里自动多出了一行内容
stm32 TouchGFX基础教程(五)使用文本和字体_第5张图片
LocationWidget 表示用到的文本是在第一个屏幕中的buttonWidgetWithLabel1上,Typography 表示用的是什么字体样式,这里我们用的就是刚才在Typographies选项卡里的楷体,
Alignment 用来设置字体靠左、居中、靠右,
Direction 设置文本书写顺序,汉语、英语都是从左往右的书写顺序,阿拉伯文是从右往左书写的
GB 一栏是放的具体的文本内容。
在点击Generate Code的时候,Touchgfx Designer会把使用到的文本字符转换成字模数据,而并不会把没有用到的字符的字模也一起生成源文件,这样便节省了内存资源(ROM或Flash)。

Single Use中的每一个文本都只用了一次,而且列出了每一个文本被用在了哪个控件上。而Resources里的文本则可以用在多个地方,可以被使用任意次数。接下来介绍Resources。
二、使用Resources
1、接着上面的项目继续在Resources里点击ADD NEW RESOURCES 建立如下几个文本:
stm32 TouchGFX基础教程(五)使用文本和字体_第6张图片
然后回到画布Canvas,并在屏幕中增加一个Text Area控件,并在属性栏中选用Resourcesstm32 TouchGFX基础教程(五)使用文本和字体_第7张图片
可以看到Text Area控件的内容变成了苹果,如果选第二项就会变成橘子,选第三项会变成菠萝
2、添加一个按钮交互,命名为changeText,然后生成代码stm32 TouchGFX基础教程(五)使用文本和字体_第8张图片
实际上,touchgfx designer在编译的时候会报错stm32 TouchGFX基础教程(五)使用文本和字体_第9张图片
但是把Typographied中的楷体更换成幼圆和汉仪综艺简体却都能编译成功,有知道原因的小伙伴欢迎留言答疑解惑。笔芯~~
3、在VS中打开项目,在Screen1View.hpp文件中增加引用

#include 

因为Resources中的文本资源需要通过它来使用。
再定义一个属性,用来索引Resources中的4个文本,照例需要定义虚函数,如图
stm32 TouchGFX基础教程(五)使用文本和字体_第10张图片
然后在Screen1View的构造器中初始化resourceIndex为0,并在虚函数中实现如下代码
stm32 TouchGFX基础教程(五)使用文本和字体_第11张图片
invalidate()是每个控件都有的方法,用来告诉系统这个控件的内容发生了变化,在下一次屏幕刷新的时候请更新该控件的显示,如果不调用invalidate()方法,点击按钮文字是不会变化的哦。
TypedText
总结
1、在Touchgfx designer中如果要显示文本,就需要先在Typographies里定义字体样式
2、Single Use里的文本资源只用了一次,而且是系统自动添加的。当然,也可以手动添加
3、Resources里的文本资源可供任意多个控件使用,没有次数限制
-------------------------------下面是我的小广告----------------------------------------------
在这里插入图片描述
淘宝小店:芯视界touchgfx

你可能感兴趣的:(stm32,touchgfx)