【我与gui-guider②】button控件

RCSN

【我与gui-guider②】button控件 [复制链接]

 

 

  botton词义就是按钮意思，在lgvl也充当着开关作用。这里说明以gui-guide进行对buttom操作，以便形象理解lgvl的按钮控件。

  这里我们根据上章的新建工程，参考 https://bbs.eeworld.com.cn/thread-1159377-1-1.html，自行建立好自己分辨率的工程，按button控件的事件触发作为命名ID，如以下

  这里我们使用了七个按钮，也就是说按钮事件在此设计器中有7个。我们以clicked按钮介绍下按钮的相关属性，依次类推其他控件，都是一样的操作方式。我们把它切换成中文，这样对于我们更加方便理解。

1、通用部分，包含了名字ID，控件坐标，控件大小。

①名字ID：系统默认的是btn_x，有多少个button就按照序号进行排序，但是实际用的时候，建议自己命名，以控件功能作为简要名称，同个srceen不能相同命名，但是不同srceen则可以。

②控件坐标：分为横坐标和纵坐标。当前的设计器版本不支持两个控件之间对齐方式，这个不太方便，如果需要多个控件对齐，要么在设计器上横纵坐标一样，要么自己设计器先随便放，然后在custom文件中自己手动加API进行对齐。

③控件大小：分为高度和宽度。很简单，就是定义控件的大小。

 

2、属性部分，包括文本编辑、切换toggle、字体选择、字体大小、字体颜色

①文本编辑：可以按钮的文本编辑，其实也就是个在button这个父对象建立个label子对象，需要注意的是，默认生成的是对齐Button的中心，如果需要对齐上下左右边自由对齐，需要在custom自定义代码中，需要禁止布局功能，当禁止之后,对于子对象在父对象中的摆放位置,子对象必须得手动通过API接口随便定义对齐。e.g: lv_btn_set_layout(ui->led_page1_btn_back, LV_LAYOUT_OFF)

②切换：也就是toggle，这里勾选就是把按钮当作开关用，点击前后样式改变后，之后的样式就保持不变，直到下一次点击。

③字体选择：目前只支持simsum，但是这种字体很丑，我们可以自己生成自己的字库，通过custom来改变设计器的字库，这个后面章节会进行说明。

note:设计器当前有选项可支持导入自定义字体，但是导入不生效，毕竟V1.0版本，等待官方修复即可。

④字体大小：也就是字体的大小，字体越大，消耗ROM也就越大，自己均衡资源决定大小。

⑤字体颜色：也就是字体的颜色RGB，可手动输入RGB，也可以自己在颜色框选择

freebsder

就喜欢看RC折腾新东西

RCSN

3、样式属性，不同状态可以有不同的样式，lgvl 7.0以上最大改变就在这里，样式的多样化，也给用户提供多选择。包括背景、内外边框、动画效果等都有。

①默认样式：若勾选，则各个状态的样式都是按照默认的来。

②状态：也就是控件的当前状态，这里包含了缺省状态（没有任何动作）、聚焦、单击、翻转状态

③禁用功能：若点击，则状态当前选择的样式是无效的，动作发生了样式也不会显示出来。

④背景 ：也就是控件的背景颜色，这里包含了背景色、渐变色、透明度、和渐变方式。255就是不透明，0是透明。

e.g 若选择的背景色是蓝色，渐变色为白色，透明度为255，渐变方向为垂直，则效果如下：

若选择的背景色是蓝色，渐变色为白色，透明度是150，渐变方向是水平，效果如下，透明度在有图片或者颜色的前景下很有用。

接下图

①边框：有颜色、透明度、宽度、圆角可选择。为了方便理解这几个属性，这里列举了右边的A控件、B控件、C控件。A是图上默认的样式边框，B是透明度变为150，宽度变为4，圆角为200；C则是把圆角为0，这样变成了长方形。

③动画 这是Lgvl的新改变，这里如果设置了动画，则会位移和方式、持续时间进行动画移动。

4、事件 button支持不少事件，事件属性包含以下，有目标对象，触发方式，作用对象，对作用对象的动作是怎样的，事件的处理在设计器上，Button已经足够很完善。特别是还支持自定义C语言，这个也给用户足够的扩展性。

这里我们把每个控件作为一个事件名称，然后作用对象还是自己，每个控件的动作不一样，有的是触发就改变背景颜色，改变控件长宽，隐藏控件，设置动画等。这里我们看下设计器的模拟器和在单片机的运行情况。

 

 

 

annysky2012

复制以后，将文中图片重新插入即可

Jacktang

RGB自动可调时能显示三种颜色的数字值么

RCSN

Jacktang 发表于 2021-3-20 18:42 RGB自动可调时能显示三种颜色的数字值么

可以，这点设计器容易实现

RCSN

annysky2012 发表于 2021-3-20 13:43 复制以后，将文中图片重新插入即可

我现在就是这么做的

RCSN

至此，button控件已经说明完毕，下一章，btnimg控件，也就是带图片的按钮空间。

dql2016

这个设计器哪里下载，看着不错

RCSN

dql2016 发表于 2021-3-22 13:36 这个设计器哪里下载，看着不错

NXP官网下载即可

ou513

好东西，弱弱的请教一下，button如何响应实体按键？

RCSN

ou513 发表于 2021-3-23 08:00 好东西，弱弱的请教一下，button如何响应实体按键？

可以通过读取实体按键状态来改变button的状态以及样式

深宣宣

马克一下

w494143467

楼主是要把guider玩个遍啊~