嵌入式UI开发-lvgl+wsl2/macOS+vscode系列：3、style（样式）熟悉及MacOS模拟环境搭建及编译问题解决（‘SDL2/SDL.h‘ file not found）

一、前言

之前的基础控件已经熟悉了，接下来我们进行样式的熟悉，并且尝试搭建macos的模拟开发环境。

二、macos模拟环境搭建及编译运行示例相关问题（‘SDL2/SDL.h’ file not found）

brew install sdl2
brew install cmake

//可能需要root权限运行相关命令
git clone https://github.com/lvgl/lv_port_pc_vscode.git
rmdir lvgl
git clone https://github.com/lvgl/lvgl.git
git status
git checkout 8691574
mkdir build
cd build
cmake ..
make
../bin/main

https://segmentfault.com/q/1010000009416076
编译时出现：
/Users/yz/work/lv_port_pc_vscode/lvgl/src/drivers/sdl/lv_sdl_keyboard.c:15:10: fatal error: ‘SDL2/SDL.h’ file not found
可以像链接中所说修改环境变量，macos通过homebrew安装的程序却无法被找到，这个可能是比较常见的问题，我们这里是C程序，而且安装路径有一点差异，需要稍微修改一下：

export C_INCLUDE_PATH="$CPLUS_INCLUDE_PATH:/usr/local/Cellar/sdl2/include"

如果是wsl2，那么是不会有这个问题的，我们的demo之前的总结已经跑起来了，这里只是看一下macOS上模拟lvgl的效果是否有较大偏差，目前看着是符合预期的，后续移植到mcu或者Linux上显示效果想必也不会有太大的区别。

三、style示例

1、style示例1（样式设置大小、位置和填充属性）

#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE

/**
 * 使用大小、位置和填充样式属性
 */
void lv_example_style_1(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));
    lv_style_set_y(&style, 80);

    /*使用新样式创建对象*/
    lv_obj_t * obj = lv_obj_create(lv_screen_active());
    lv_obj_add_style(obj, &style, 0);

    lv_obj_t * label = lv_label_create(obj);
    lv_label_set_text(label, "Hello");
}

#endif

展示：

• 使用大小、位置和填充样式属性
  

2、style示例2（背景样式属性）

#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES

/**
 * 使用背景样式属性
 */
void lv_example_style_2(void)
{
   
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);

    /*做一个渐变*/
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    static lv_grad_dsc_t grad;
    grad.dir = LV_GRAD_DIR_VER;
    grad.stops_count = 2;
    grad.stops[0].color = lv_palette_lighten(LV_PALETTE_GREY, 1);
    grad.stops[0].opa = LV_OPA_COVER;
    grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);
    grad.stops[1].opa = LV_OPA_COVER;

    /*将渐变移至底部*/
    grad.stops[0].frac  = 128;
    grad.stops[1].frac  = 192;

    lv_style_set_bg_grad(&style, &grad);

    /*使用新样式创建对象*/
    lv_obj_t * obj = lv_obj_create(lv_screen_active());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
}

#endif

展示：

• 使用背景样式属性（比如示例中设置渐变样式）
  

3、style示例3（边框样式）

#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES

/**
 * 使用边框样式属性
 */
void lv_example_style_3(void)
{
   
    static lv_style_t style;
    lv_style_init(&style);

    /*设置背景颜色和半径*/
    lv_style_set_radius(&style, 10);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));

    /*添加边框到底部+右侧*/
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_border_width(&style, 5);
    lv_style_set_border_opa(&style, LV_OPA_50);
    lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT);

    /*使用新样式创建对象*/
    lv_obj_t * obj = lv_obj_create(lv_screen_active());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
}

#endif

展示：

• 使用边框样式属性（设置边框背景颜色和半径）
  

4、style示例4（轮廓样式）

#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES

/**
 * 使用轮廓样式属性
 */
void lv_example_style_4(void)
{
   
    static