使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第三讲)

Gui Guider是配合lvgl开发使用的软件平台，其中内置有30多个控件供开发人员使用，可以创作多个界面以及生成代码，为开发提供方便。

创建工程成功后，通过右侧的界面属性可以调配界面的颜色和透明度，左上角是控件工具栏，具体如下图所示：

按键

在工具栏中拖拽一个按键到界面画布中去，将btn的名字修改为“按键”，由于该平台缺失文字库，需要调整文件格式为宋体，点击运行才可正常显示。

在样式列表中***行是关于按键模块的状态设置，我们只设置初始状态即可，下一栏是背景颜色和透明度的设置，再下面是字体的设置，我们选择16号字体与宋体格式，文字对齐方式为居中，***下面俩栏是美化方面的设置，我们可以根据边框背景颜色以及粗细自己自定义，也可点击更多预设样式选择官方提供的三种样式修改使用。

下图是美化后的效果以及设置：

就这样关于一个按键的设计就完成了，然后点击右上角的运行，在运行中点击c语言运行，开发者可以在该平台初步看到项目实现的样式与功能。

点击代码管理可以看到你设计界面所生成的代码，当使用时只需要将这块代码移植即可。下方是生成的代码：

//创建一个界面

    ui->screen = lv_obj_create(NULL);

    lv_obj_set_size(ui->screen, 480, 480);

    lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);

    //设置界面透明度颜色

    lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

    lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);

    lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

    //创建一个按键

ui->screen_btn_1 = lv_btn_create(ui->screen);

//创建按键上的标签

ui->screen_btn_1_label = lv_label_create(ui->screen_btn_1);

//设置标签文本

lv_label_set_text(ui->screen_btn_1_label, '按键');

//设置标签文本换行方式

lv_label_set_long_mode(ui->screen_btn_1_label, LV_LABEL_LONG_WRAP);

//对齐标签至按钮中心

lv_obj_align(ui->screen_btn_1_label, LV_ALIGN_CENTER, 0, 0);

//设置按钮内边距

lv_obj_set_style_pad_all(ui->screen_btn_1, 0, LV_STATE_DEFAULT);

//设置标签的宽度为按钮百分比

lv_obj_set_width(ui->screen_btn_1_label, LV_PCT(100));

//设置按钮位置

lv_obj_set_pos(ui->screen_btn_1, 185, 282);

//设置按钮大小

    lv_obj_set_size(ui->screen_btn_1, 100, 50);

//设置按键样式

//设置背景透明度

lv_obj_set_style_bg_opa(ui->screen_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框宽度

lv_obj_set_style_border_width(ui->screen_btn_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框透明度

lv_obj_set_style_border_opa(ui->screen_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框颜色

lv_obj_set_style_border_color(ui->screen_btn_1, lv_color_hex(0x5482a9), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框样式

lv_obj_set_style_border_side(ui->screen_btn_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置圆角半径

lv_obj_set_style_radius(ui->screen_btn_1, 25, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置阴影宽度

lv_obj_set_style_shadow_width(ui->screen_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本颜色

lv_obj_set_style_text_color(ui->screen_btn_1, lv_color_hex(0x12548b), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本大小样式

 lv_obj_set_style_text_font(ui->screen_btn_1, &lv_font_SourceHanSerifSC_Regular_18, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本透明度

lv_obj_set_style_text_opa(ui->screen_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本对齐方式

    lv_obj_set_style_text_align(ui->screen_btn_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);

具体代码使用请参考，lvgl版本对应的官方手册，下一期讲按键在模拟器上的回调函数如何使用。

本文章由威三学院出品

对课程感兴趣可以联系我们