使用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版本对应的官方手册，下一期讲按键在模拟器上的回调函数如何使用。