ESP32 LVGL8.1 ——Style Pad 内边距 (Style 1)

提示：本博客作为学习笔记，有错误的地方希望指正

一、前言

  最近开始学习LVGL,之前学习使用过的GUI有Touchgfx，touchgfx的界面的确挺好，还有专门的软件做布局，实现逻辑和交互的分开，这样大大的方便快速上手一个工程Demo，Touchfx虽然好，但是也有一定的局限，
1、对于芯片的要求比较高，之前使用的是stm32f429，外有sdram和spi falsh作为图片资源的存储，对于硬件的要求稍微高；
2、仅仅局限于stm家族系列的产品免费，Touchgfx我没有记错的话是被ST收购了，之前使用需要付费的，被收购之后专门为STM适配一套生态，整体使用还是非常方便的，但是只针对STM系列开放免费使用，其他的芯片没有这个待遇。
  后面有时间玩玩stm32G071使用spi 屏幕的touchgfx看看，回到今天的主要LVGL，LVGL是开源的可以移植多平台的GUI,目前我就是用LVGL移植在ESP32上，整体还不错，多平台开源的挺香的可以后面移植stm32低端系列的芯片，例如stm32f103（之前没有涨价价格还是挺美丽的）、国产系列都是可以的。

二、样式Pad简介

  pad本是padding的缩写，故翻译为内边距，主要用于设置位于对象内部的一些控件的内边距问题。

2.1顶部边距 pad_top

  在顶部设置填充。它使这个方向的内容区域更小。

2.2底部边距 pad_bottom

  在底部设置填充。它使这个方向的内容区域更小。.

2.3左边距边距 pad_left

  设置左边的填充。它使这个方向的内容区域更小。

2.4右边距 pad_right

  设置右侧的填充。它使这个方向的内容区域更小。

2.5行边距 pad_row

  设置行之间的填充。由布局使用。

2.6列边距 pad_column

  设置列之间的填充。由布局使用。

三、Style Pad API

  用于设置内边距的API可以在lv_style_gen.h文件中找到，主要有以下几个API

void lv_style_set_pad_top(lv_style_t * style, lv_coord_t value);		//设置样式顶部内边距
void lv_style_set_pad_bottom(lv_style_t * style, lv_coord_t value);		//设置样式底部内边距
void lv_style_set_pad_left(lv_style_t * style, lv_coord_t value);		//设置样式左边内边距
void lv_style_set_pad_right(lv_style_t * style, lv_coord_t value);		//设置样式右边内边距
void lv_style_set_pad_row(lv_style_t * style, lv_coord_t value);		//设置样式内部对象之间的行间距由布局使用
void lv_style_set_pad_column(lv_style_t * style, lv_coord_t value);		//设置样式内部对象之间的列间距由布局使用

  用过上面的几个基函数lvgl封装了几个API

static inline void lv_style_set_pad_all(lv_style_t * style, lv_coord_t value);	//四边内边距
static inline void lv_style_set_pad_hor(lv_style_t * style, lv_coord_t value);	//水平内边距 左右相同
static inline void lv_style_set_pad_ver(lv_style_t * style, lv_coord_t value);	//竖直内边距 上下相同
static inline void lv_style_set_pad_gap(lv_style_t * style, lv_coord_t value);	//差距内边距 行列相同 由布局使用

四、示例

/*************************************************
 *  函数名称 :  lv_style_pad 样式设置边距
 *  参    数 ： 无
 *  函数功能 ： 设置样式圆角、尺寸、内边距、位置
 *************************************************/
void lv_style_pad(void)
{
   static lv_style_t style;         //创建样式
   lv_style_init(&style);           //初始化样式
   lv_style_set_radius(&style,5);   //设置样式的圆角

   lv_style_set_width(&style,150);  //设置样式的宽度
   lv_style_set_height(&style, LV_SIZE_CONTENT); //设置样式的高度 我的理解是自适应高度

   lv_style_set_pad_ver(&style,20); //设置样式的上下内边距
   lv_style_set_pad_left(&style,5); //设置左边距

   lv_style_set_x(&style,lv_pct(50));  //设置样式的x位置 ，基准点左上角
   lv_style_set_y(&style,80);       //设置样式的y位置

   lv_obj_t * obj = lv_obj_create(lv_scr_act());   //创建对象
   lv_obj_add_style(obj,&style,0);                 //设置对象的样式 默认模式

   lv_obj_t * label = lv_label_create(obj);        //创建Label obj 为父对象
   lv_label_set_text(label,"Hello ESP32");         //设置Label显示
}

五、仿真结果