一、前言
$ v; m' @+ w' d+ e( o" Clittlevgl是一个小型开源嵌入式 GUI 库(简称LVGL)，界面精美,消耗资源小，可移植度高，支持响应式布局，全库采用纯 c 语言开发，移植上手简单。
littleVGL 的主要特性如下:
• 具有非常丰富的内置控件,像 buttons, charts, lists, sliders, images 等
" O  b3 @; g* J  b; I% P1 L• 高级图形效果：动画，反锯齿，透明度，平滑滚动
# ]  N1 R$ q1 E: F6 H• 支持多种输入设备,像 touchpad, mouse, keyboard, encoder 等
# C: n/ H$ V. w' e! }7 n+ y• 支持多语言的 UTF-8 编码
1 L8 U% t" F4 l6 ?1 M• 支持多个和多种显示设备，例如同步显示在多个彩色屏或单色屏上
• 完全自定制的图形元素
$ X4 {% [( q: b) N& n9 T7 M• 硬件独立于任何微控制器或显示器
; n- ?" m2 |- ^2 ?) K( z• 可以缩小到最小内存 (64 kB Flash, 16 kB RAM)
• 支持操作系统、外部储存和 GPU（非必须）
. o, x# w: a3 [7 R0 e• 仅仅单个帧缓冲设备就可以呈现高级视觉特效
& b, w  U$ R( m) U, a9 ^* _• 使用 C 编写以获得最大兼容性(兼容 C++)
• 支持 PC 模拟器
% v3 a0 w4 b% K& Z" t• 为加速 GUI 设计,提供教程,案例和主题,支持响应式布局
• 提供了在线和离线文档
5 K$ X9 y0 r, R; u8 l2 K• 基于自由和开源的 MIT 协议
6 b5 l* w: Q9 e* u$ ^效果图以及更多详细的说明请见官网
littlevgl中文官网：https://littlevgl.cn/
" i9 P" }$ s' w% u! Y5 a% klittlevgl英文官网：https://lvgl.io/
! i/ s' Q6 p$ q% n7 X
0 m6 F$ I5 Y" O" f5 B
' l: D$ h; b  }( T7 x二、学习资料
官方文档：https://docs.lvgl.io/latest/en/html/index.html(注:官网打不开的话可能会需要梯子)
# e( g0 o& ~1 {Github: https://github.com/lvgl/lvgl
三、移植前的准备工作
+ `5 |5 N  p0 n' O6 j- [开发环境：
  |# {5 j& M: Z. ?' tKeil MDK5 v5.28
ARM Compiler 6.0版本或以上
关于编译器，老版本的5.x编译器也能编译，但是新的6版本的编译器在编译速度与效率上有很大的提升，并且解决了一些莫名其妙的bug，强烈建议升级到6版本的编译器。笔者使用的版本是v6.14.1。
2 N5 E! e; l6 I+ P0 K# }

# ]5 h9 A7 H( O/ h% s: C硬件：
STM32F103开发板
屏幕一块（单色点阵屏或者是LCD彩屏都可以）
# p; o% v/ Y  e* Z- I% v笔者使用的开发板是正点原子的战舰V3开发板，芯片是STM32F103ZET6，72M主频+512k flash+64k ram，这样的性能足够跑LVGL了，当然，你的芯片性能越高肯定越好。哦，板上还外挂了一颗1M字节的SRAM，这对提升性能很有帮助。如果你用的不是这款芯片或者这块开发板，那也没关系，笔者会详细指出移植过程中不同的芯片移植需要注意的地方。
( N6 i& P) b6 Z8 C- k, B" A
6 ^$ F4 x# @) a% y) q; b0 [  f
获取源码：
源码地址：https://github.com/lvgl/lvgl
源码有很多的发行版，不同的发行版对应着不同的LVGL版本，注意不同的版本之间是不同的，比如版本V6与版本V7之间就变化很大，具体的版本变化信息可以看它的release note，这里我以v7.1.0版本为例来移植，并且今后的学习都会使用这个版本。

7 t  h( o& @* ?8 j  `4 N  B1 U打开下载好的文件夹
7 L0 `& ]; X' m, G3 q" i5 k+ Z
我们重点关注src/目录和lv_conf_template.h, lvgl.h 这几个文件，其它的暂时不用管。
, p0 u. \# T% L* W; g

准备模板工程：
& ~- ^# R" [5 U为你的开发板准备好一个模板工程
要求：这个模板工程至少能够驱动一块屏幕(做GUI必须得有屏幕呀= =)
如果你的屏幕带有触摸功能，那你的工程还需要有触摸屏的驱动，其实触摸屏驱动需要但非必须，没有触摸功能的话你也可以做一些展示的界面。事实上LVGL也支持键盘，鼠标，触控板等外设，因为在LVGL核心那里，它会将这些全部抽象为输入设备，它只需要从输入设备那里取得数据，并不关心你所用的是何种设备。
当然，触摸屏已经用得相当广泛，笔者使用的屏幕同样是正点原子家开发板配套的屏幕，型号：4.3英寸MCU屏，800*480分辨率，带电容触摸功能，其接口为16位并口，驱动IC：NT35510，触摸控制IC：GT9147，触摸控制接口为IIC。
. q8 k+ a, y" ?" W/ f" _/ j因此我需要提前准备好并且测试好这些驱动，对于屏幕控制器，除了初始化API（就是函数），还需要提供填充LCD的API，像这样：
2 O7 F0 x0 H- ~9 f3 k9 h
: j4 ^% J9 p) U
LCD_Color_Fill(x1,y1,x2,y2,(u16*)color_p);
1
(x1,y1), (x2,y2)为俩坐标点，color_p为显存指针，该API要实现的功能为：将显存区域内的像素数据点，依次填充到以(x1,y1)为起点， (x2,y2)为重点的对角矩形区域内。
- g9 _4 c: q7 q9 ^! D, S注意，这个API是LVGL渲染屏幕的唯一API，哈哈哈简单吧。同样LVGL内部也不关心使用的何种屏幕，他们之间仅通过一个填充色块儿的API耦合，这种高内聚、低耦合的模块儿化设计思想是非常值得我们学习借鉴的。
% J" H1 ?' J3 W
5 e2 l4 {7 q: \0 H5 S% Z3 F& E, ^
- X" G# O; g: q/ |四、开始移植
7 i8 \' @7 P" A$ E8 Z8 N* Y①修改MDK工程(默认你已经会使用keil了)
! c6 D  }" A  n( [$ \7 w用keil mdk打开我们的模板工程，添加4个Groups:GUI_core, GUI_drv, GUI_demo, GUI_app，这些组用于添加我们的c代码到工程中，不同的组名意味着会存放不同功能的c代码。(注意：工程中的组与实际文件目录并不相同)

( N& b( y) P8 ?( @/ g- g
$ t$ }5 w+ O0 _' I# b+ F2 nGUI_core：GUI核心文件层
GUI_drv：GUI驱动设备层，包括显示设备与输入设备
GUI_demo：存放官方demo
  i" n' M8 g( [& ?. V5 d+ C0 B, y1 f+ MGUI_app：存放我们自己写的GUI应用
修改后的工程结构：

②添加源文件
在项目的根路径下新建GUI目录，以及GUI_app目录，然后将准备工作第三步下载到的源码直接解压到GUI/目录下，然后把解压出来的文件夹改名为lvgl；在GUI/目录下新建lvgl_driver目录，然后：
: M& Y1 S( |5 y* @# C+ H

1. //从GUI\lvgl\examples\porting\目录拷贝：
   
2. lv_port_disp_template.c
   
3. lv_port_disp_template.h
   
4. lv_port_indev_template.c
   
5. lv_port_indev_template.h
   8 [/ Q% @# p1 D1 I" A+ [9 f
6. // 到GUI/lvgl_driver/目录下并分别改名为：
   # b. [8 u7 ]% Y, e6 D- D
7. lv_port_disp.c
   0 q4 x2 ^) Y- h$ F; V
8. lv_port_disp.h
   
9. lv_port_indev.c
   % f9 t( u$ Z2 e9 a1 I/ |
10. lv_port_indev.h
    5 w1 {" {! j  \6 b
11. 
    8 [4 [+ v. s7 t
12. //添加：
    
13. dma.c
    ! g- p# C; q6 i1 A' [! ?
14. dma.h
    
15. //这两个文件时我编写的使用DMA进行加速的代码，如果你不使用DMA请忽略
    ) Q& m7 t5 T6 P4 S: `

复制代码

然后把GUI/lvgl/lv_conf_template.h拷贝到GUI/目录下并改名为lv_conf.h。
8 L6 s+ z- J2 u, ~( C修改后的目录结构：
4 r0 ?0 _3 R! l! u

$ n/ A% ~. x; O6 l6 r) Q

6 s6 [/ D+ ?; c' }/ Z5 t% k
③添加源文件到工程中
1 b" {' O; Y) M" k" K% I在GUI_core组中添加以下文件夹中所有的.c文件：
& H! T6 m1 l1 m& Q5 Y
1 t$ d" [& h' }. L9 P: T0 P

1. GUI/lvgl/src/lv_core
   $ t$ B" v# `/ ]. P7 Q
2. GUI/lvgl/src/lv_draw
   2 @6 N" P! y" p( q" D/ ^! {' Z
3. GUI/lvgl/src/lv_font
   
4. GUI/lvgl/src/lv_hal
   
5. GUI/lvgl/src/lv_misc
   0 m( f2 z9 u2 R: U" R+ S3 f
6. GUI/lvgl/src/lv_themes
   - ^* B/ x/ a& g# |- A# M
7. GUI/lvgl/src/lv_widgets
   
8. //注意不要添加 GUI/lvgl/src/lv_gpu中的文件，除非你用到了相关功能
   

复制代码

在GUI_drv组中添加以下.c文件：
) ]: V$ r  C* }% y& ~# d

1. GUI/lvgl_driver/dma.c
   
2. GUI/lvgl_driver/lv_port_disp.c
   1 G6 u/ g- G4 K) W3 ]* X
3. GUI/lvgl_driver/lv_port_indev.c

复制代码

④添加头文件路径

⑤修改配置文件
打开GUI/lv_conf.h
9 n# r; J; E# b* X首先第十行设置为#if 1 使能整个配置文件
6 _/ |) T4 v! _3 \, C/ o/ A找到以下几个宏定义并修改

1. #define LV_HOR_RES_MAX          (480)//定义屏幕的最大水平分辨率
   
2. #define LV_VER_RES_MAX          (800)//定义屏幕的最大垂直分辨率
   0 Y- t# m0 H, k
3. //修改为你的屏幕分辨率即可
   ! s* h" w& U% _/ Q% M
4. 
   
5. /* Color depth:
   
6. * - 1:  1 byte per pixel
   
7. * - 8:  RGB332
   
8. * - 16: RGB565
   
9. * - 32: ARGB8888
   
10. */
    : j: v) q8 ?- f3 f3 J
11. #define LV_COLOR_DEPTH     16
    ; a6 M8 b; C1 o0 v+ j+ f) j+ Q9 f- V2 f
12. //定义颜色深度，如果是单色屏的话就改为1
    
13. 
    ! h% L: W5 W  Q) I# V* @
14. #  define LV_MEM_SIZE    (30U * 1024U)
    
15. //给LVGL分配内存的大小，至少需要2k
    

复制代码

这个文件很重要，控制着整个LVGL的功能，但我们暂时就先修改这几个参数，其它参数暂时保持默认即可。等到我们深入了解了LVGL或者需要用到其它特性时再去研究修改也无妨。
" \# ~$ t% E, r& j6 F然后我们需要修改GUI/lvgl_driver/目录下的lv_port_disp.c, lv_port_disp.h,lv_port_indev.c, lv_port_indev.h这4个文件，这里直接给处修改好之后的文件。

  ?/ {4 }- N9 e
lv_port_disp.c
7 t* m$ {' H4 q/ R" n

1. #if 1
   " h5 T* G) O# L; |- `6 d3 ]/ Q' P5 Z, x
2. #include "lv_port_disp.h"
   
3. #include "LCD.h"
     I" R3 w1 O9 X8 n( o9 R
4. #include "dma.h"
   
5. 
   
6. #define COLOR_BUF_SIZE (LV_HOR_RES_MAX*LV_VER_RES_MAX)
   
7. //分配到外部 1MB sram 的最起始处
   ! N4 w1 a$ a" y1 N$ X" m
8. static lv_color_t *color_buf;
   
9. 
   : J0 J  i5 o) Z+ i2 W# Z9 h% o2 W7 U
10. static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p);
    
11. 
    
12. void lv_port_disp_init(void)
    ( C) u2 P2 g$ w. `) i" I4 _8 j
13. {
    1 N% c/ c! x* @" a: X- b- _
14.     static lv_disp_buf_t disp_buf;
    
15.     color_buf = (lv_color_t *)0X68000000;//显示缓冲区初始化
    
16.     lv_disp_buf_init(&disp_buf, color_buf, NULL,COLOR_BUF_SIZE);
    . t, }: J$ j" L5 l0 H8 I
17.     lv_disp_drv_t disp_drv;
    7 \/ Z% H& Y# l- S# \6 [7 F& Q8 i6 E: S
18.     lv_disp_drv_init(&disp_drv);
    
19. 
    
20.     //注册显示驱动回调
    
21.     disp_drv.flush_cb = disp_flush;
    
22.    
    5 @; A4 i7 p5 H( K4 V% W, N# q
23.     //注册显示缓冲区
    
24.     disp_drv.buffer = &disp_buf;
    
25.    
    
26.     //注册显示驱动到 lvgl 中
    ; B3 n( b( z7 n
27.     lv_disp_drv_register(&disp_drv);
    6 N, A$ W1 \( v+ c  Z+ ?, U' J; Q
28. }
    , C- {7 R/ `$ Z; c- ?- R) `
29. 
    * v; s! E4 k8 o
30. //把指定区域的显示缓冲区内容写入到屏幕上,你可以使用 DMA 或者其他的硬件加速器
    
31. //在后台去完成这个操作但是在完成之后,你必须得调用 lv_disp_flush_ready()
    ( q* J- l/ K1 D+ v) G+ L
32. static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
    2 U9 K7 j* Q9 o' `" z8 q
33. {
    
34.     //把指定区域的显示缓冲区内容写入到屏幕
    
35.     //LCD_Color_Fill(area->x1,area->y1,area->x2,area->y2,(u16*)color_p);//TODO
    , R4 M. X( N% B9 N  c. p: y* w
36.     DMA_Fill_Color(area->x1,area->y1,area->x2,area->y2,(u16*)color_p);
    - M, b- Z7 c, U% S
37.     lv_disp_flush_ready(disp_drv);//最后必须得调用,通知 lvgl 库你已经 flushing 拷贝完成了
    0 F5 k# M$ g8 F7 H7 u" q
38. }
    
39. 
    
40. #else /* Enable this file at the top */
    6 ~/ M! l* Z/ k# K0 u2 k5 @8 t* x
41. /* This dummy typedef exists purely to silence -Wpedantic. */
    8 o% H2 D0 O* s4 c* ?+ g
42. typedef int keep_pedantic_happy;
    
43. #endif
    # u" q6 w5 E2 A5 ?  U" B4 |$ H+ j

复制代码

lv_port_disp.h

, H: e6 T8 `* X5 `+ S

1. #if 1
   ) K( f6 _* _8 [) ]8 M
2. #ifndef LV_PORT_DISP_H
   , Z- x: A/ ?5 M' B) L
3. #define LV_PORT_DISP_H
   
4. 
   
5. #ifdef __cplusplus
   
6. extern "C" {
   & k$ Q% }0 h3 r2 q, k
7. #endif
     `  n% ]4 [3 Z7 j. j
8. 
   
9. #include "lvgl/lvgl.h"
   
10. 
    0 p" {6 ^% T5 e% K! m' I
11. void lv_port_disp_init(void);
    : T$ D7 D# B. ?6 V3 [$ X# v
12. 
    
13. #ifdef __cplusplus
    
14. } /* extern "C" */
      ^0 l9 b0 Q% t8 R$ S) p# F
15. #endif
    * S4 s5 T7 o# p* y+ a
16. 
    
17. #endif /*LV_PORT_DISP_TEMPL_H*/
    & h$ J4 [' h. l
18. #endif /*Disable/Enable content*/
    & x0 ~0 {) Y4 G! @1 K8 N* K  h2 i

复制代码

lv_port_indev.c

1. #if 1
   4 G' N% R0 c; d8 A1 ^
2. #include "lv_port_indev.h"
   / p0 T9 F  E( q
3. #include "Touch.h"
   ! S3 m( j, A& k. Q5 m
4. 
   6 I! E; L) }. x2 j3 l" Z: b. X
5. static bool touchpad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
   
6. 
   
7. void lv_port_indev_init(void)
   1 h" I1 P8 \& P; y- F4 G
8. {
   ; _1 ]0 C. D" K$ d$ S
9.     lv_indev_drv_t indev_drv;
   1 V7 y8 }/ M- W8 g0 v  R- r
10. 
    0 l! F  @4 H3 s4 E* ~
11.     /*Register a touchpad input device*/
    : f; u" U$ f! u
12.     lv_indev_drv_init(&indev_drv);
    " U1 S" w& {% B/ N' N
13.     indev_drv.type = LV_INDEV_TYPE_POINTER;
    7 L) o; Y! p3 I  I9 w
14.     indev_drv.read_cb = touchpad_read;
    
15.     lv_indev_drv_register(&indev_drv);
    6 V# i6 `- C# J- p; U" v1 `) k8 K
16. }
    
17. 
    
18. static bool touchpad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
    % w9 e  d: _0 `3 K6 X
19. {
    
20.                 static uint16_t last_x = 0;
    6 O! Y/ S1 c. S) a
21.                 static uint16_t last_y = 0;
    
22.                 Tp_dev.scan();
    
23.                 if(Tp_dev.sta&0x80)//触摸按下了
    4 G# A7 T( p9 V; C
24.                 {
    
25.                         last_x = Tp_dev.X[0];
    
26.                         last_y = Tp_dev.Y[0];//竖屏
    
27.                        
    
28.                         data->point.x = last_x;
    + @0 G: U0 F6 R; K; ^9 ^. V
29.                         data->point.y = last_y;
    + J; I5 J# d! y% o/ u/ f& y) l
30.                         data->state = LV_INDEV_STATE_PR;
    + N5 @/ I+ Z$ t* ]
31.                 }else{
    # f: T4 G3 P  H9 h$ K) d7 ^+ m
32.                         data->point.x = last_x;
    5 S3 A9 m' j- \5 n
33.                         data->point.y = last_y;
    ' J0 |9 W  D, d5 u7 P
34.                         data->state = LV_INDEV_STATE_REL;
    
35.                 }
    
36.     return false;
    " ~5 O/ U  @% {5 K! s! u- V) ^
37. }
    5 }# p: Q- C0 i3 D' M( G
38. 
    $ K5 q" D" N& O
39. #else /* Enable this file at the top */
    3 p  F6 Z: p' O( X. B
40. 
    . d8 Z6 @# ^5 m
41. /* This dummy typedef exists purely to silence -Wpedantic. */
    
42. typedef int keep_pedantic_happy;
    1 T2 Y4 f/ C; o2 m; W2 V' U
43. #endif
    " E/ X8 e/ v& w  Y9 x

复制代码

lv_port_indev.h

1. #if 1
   1 m/ M- r% [. N8 r/ I
2. #ifndef LV_PORT_INDEV_H
   
3. #define LV_PORT_INDEV_H
   
4. 
   
5. #ifdef __cplusplus
   1 e0 x& i" \1 Z7 v" _6 z$ x. N
6. extern "C" {
   ! w) {% p% X" `# D: h2 d( `
7. #endif
   
8. 
   : y1 `) x6 i+ X
9. #include "lvgl/lvgl.h"
   
10. 
    
11. void lv_port_indev_init(void);
    
12. 
    
13. #ifdef __cplusplus
    # C0 d. R- j. H
14. } /* extern "C" */
    
15. #endif
    
16. 
    $ Q5 F$ ^' T! V4 b. K+ w0 h( Q
17. #endif /*LV_PORT_INDEV_TEMPL_H*/
    
18. #endif /*Disable/Enable content*/
    - h) i- k2 d' S! q- H' Y

复制代码

⑥完善main函数
至此，移植工作基本完成，接下来只需要完善main函数，初始化LVGL，便可放心玩耍。
) l6 K2 Y" O- q修改main.c如下：

5 ^6 J9 Y+ ?2 a" n2 w

1. #include "include_config.h"
   
2. #include "sys.h"
   ! q1 r' i0 b1 Q$ b5 z" n
3. #include "delay.h"
     K2 l9 R( A6 s  ~0 D/ ^( j
4. #include "dma.h"
   5 x' I8 D+ A2 m& X/ Q( Q
5. #include "lvgl.h"
   
6. #include "lv_port_disp.h"
   + f" B) H4 D9 v8 I
7. #include "lv_port_indev.h"
   8 e; G1 _5 v$ f" p( c$ V
8. 
   
9. void tim_lv_tick(void);
   + h$ F9 W% _  U0 D  P
10. void lvgl_first_demo_start(void);
    3 F; a1 }' o5 _, V- I( I
11. void setup()
    
12. {
    $ i( L2 u! l; w* ?& ?3 f* m
13.         JTAG_Set(SWD_ENABLE);   //关闭JTAG,只用SWD
    ) d( F7 k. L3 P# l$ {
14.         delay_init(72);
    
15.         led_init();
    8 g5 R$ n, c, n3 P" l5 b4 t
16.         myuart_init(USART1,1152000,PA(10),PA(9));
    . P) r8 ^5 w, d; A1 F+ v
17.         Timer_InitDef TIM_2_conf=
    % w- H: A  d; _
18.         {
    
19.                 .TIMx = TIM2,
    9 S0 g' Y2 y- o) S
20.                 .ms   = 1,
    
21.                 .NVIC_Priority = 0,
    ! Z5 K5 o$ a% }
22.                 .event_handler = tim_lv_tick,
    
23.         };
    
24.         timer_init(&TIM_2_conf);
    8 v' G; ]4 _) N9 @. |/ g2 \7 Y
25.        
    6 ^( g  o/ ^- G1 I9 t+ v2 u
26.         LCD_init(BKOR); //默认竖屏
    5 |- V0 D( w! B* D3 a6 ~
27.         if(Tp_dev.init())printf("Tp_dev failed!\r\n");
    / c8 `$ o9 z, B1 u! h, B! v
28.         else printf("Tp_dev success!\r\n");
    
29.        
    6 i/ ^8 N5 O6 }0 l5 n# r, Z
30.         FSMC_SRAM_Init();
    6 y5 G2 ]# a7 U
31.         DMA_fsmc_Init();
    
32. }
    
33. 
    
34. int main(void)
    0 P5 B& I2 o6 f) ?, P# N
35. {                       
    / ~; b; o$ S' [/ x
36.         setup();
    
37.         printf("set up success!\r\n");
    % j8 h4 J; x6 E4 R: f0 I- K( I
38. 
    ( n# E) K" \9 k2 ^! T; w$ T4 d  V
39.         lv_init(); //lvgl 系统初始化
    , k+ F* C, V# f$ Q1 t( m; a5 T/ T
40.         lv_port_disp_init(); //lvgl 显示接口初始化,放在 lv_init()的后面
    5 w5 \# M, b! g
41.         lv_port_indev_init(); //lvgl 输入接口初始化,放在 lv_init()的后面
    
42. 
    
43. 
    
44.         lvgl_first_demo_start();
    
45.         while(1)
    $ F) }( D+ ]* }
46.         {
    
47.                 lv_task_handler();
    
48.         }
    
49. }
    % Y5 R3 R5 A7 p$ n+ b
50. 
    
51. void tim_lv_tick()
    
52. {
    
53.         lv_tick_inc(1);//lvgl 的 1ms 心跳
    ' ^- J1 a# [6 o9 `; G
54. }
    ! Q$ o/ c" }( {% c3 f
55. 
    9 f  @0 m3 h) |3 L* v) r
56. 
    ' S- B4 l  [1 W: P, `5 Z% m
57. static void btn_event_cb(lv_obj_t * btn, lv_event_t event)
    & B  A! i9 `1 D2 w
58. {
    
59.     if(event == LV_EVENT_CLICKED) {
    
60.         static uint8_t cnt = 0;
    0 k9 a3 ~  ?. P
61.         cnt++;
    
62. 
    5 f7 e$ E6 I1 O8 p# t6 s. j) J1 ]
63.         /*Get the first child of the button which is the label and change its text*/
    
64.         lv_obj_t * label = lv_obj_get_child(btn, NULL);
    ( j- S/ a, |( F5 D/ d5 S+ G0 U. P
65.         lv_label_set_text_fmt(label, "Button: %d", cnt);
    5 a6 L$ L8 C4 p  k% c0 Z0 Q
66.     }
    ( ^! a( M2 b  g% |4 O
67. }
    0 z7 w" P" [* k6 k% `5 ]. \
68. void lvgl_first_demo_start(void)
    
69. {
    # _( }  q! l" |& [& o9 C0 g, R
70.     lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);     /*Add a button the current screen*/
    
71.     lv_obj_set_pos(btn, 10, 10);                            /*Set its position*/
    
72.     lv_obj_set_size(btn, 120, 50);                          /*Set its size*/
    # o! f+ y- D7 @& E- w; t9 U
73.     lv_obj_set_event_cb(btn, btn_event_cb);                 /*Assign a callback to the button*/
    
74. 
    . @: L) N( F- {$ G
75.     lv_obj_t * label = lv_label_create(btn, NULL);          /*Add a label to the button*/
    0 {2 |9 [- ]2 G: v* |
76.     lv_label_set_text(label, "Button");                     /*Set the labels text*/
    
77. 
    
78. 
    
79.         lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
    
80.         lv_label_set_text(label1, "Hello world!");
    
81.         lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);
    # R( X" O, s) d) e. O/ n' `
82.         lv_obj_align(btn, label1, LV_ALIGN_OUT_TOP_MID, 0, -10);
    
83. }
    

复制代码

⑦编译并运行
5 v  {6 f6 N8 H4 M设置编译器版本
" T; [. w. r+ ~; v* U1 W' F
; N9 g1 t+ u2 u; G  n注意：这一步应该在移植之前就应该执行，模板工程也使用V6编译器编译通过，免得移植后再编译各种报错。这一步非强制的。
1 `0 c. ]; P7 S6 k0 o3 \
2 f: g4 R$ T( l+ K( o. [设置编译参数
  U% ~+ w7 N: ^C99：LVGL要求 C99 或更新的编译器,否则编译是会报错的
勾选Execute-only Code, 会自动去除未使用到的代码函数，大大减小了编译后的固件大小，建议勾选，其它默认即可。

- m2 [, f0 m- S& o3 h3 Z; S4 R9 Q
编译
烧写运行
效果图：

0 b5 \! m8 @7 L. X五、总结
到这里移植工作已经结束，接下来我会介绍一下移植需要修改的那几个重点文件，假如你要移植到其它平台，请看这里。
( Z& a- I- g6 Y8 Z+ q8 }! K1 }
2 _% t- p  h7 b- j; \6 Q
lv_port_disp.c

1. //定义显存的大小
   9 i3 l& U0 [* ^1 y' U, ^' @
2. //我使用了刚好一整块屏幕的显存
   3 X. L! q0 F% ?8 Z6 V  T# B4 D  i! N
3. //如果你的内存没有那么大，那么定义10行的显存也是可以的   LV_HOR_RES_MAX*10
   
4. //LV_HOR_RES_MAX，LV_VER_RES_MAX定义于lv_conf.h
     u& h- j4 q+ s8 ?! \
5. #define COLOR_BUF_SIZE (LV_HOR_RES_MAX*LV_VER_RES_MAX)
   
6. 
   
7. static lv_color_t *color_buf;   //定义显存指针
   
8. 
   
9. 
   
10. //lv_port_disp_init函数
    . s6 @% |9 ?  f" D
11. //显存初始化，将显存指针指向我指定的内存啊区域
    , P+ @5 E4 y) Q4 ?; Y
12. //0X68000000是我板子上外挂的SRAM启始地址
    , I. b. Y( A6 e
13. //显存需要根据你自己的板子合理分配
    
14. color_buf = (lv_color_t *)0X68000000;
    9 c$ m7 s3 t8 V' X4 t% E
15. 
    . e- @' ~! a  m0 E9 b8 q5 y, _( |
16. 
    
17. //把指定区域的显示缓冲区内容写入到屏幕上,你可以使用 DMA 或者其他的硬件加速器
    ! w; c2 U- z& m9 y4 ]1 d
18. //在后台去完成这个操作但是在完成之后,你必须得调用 lv_disp_flush_ready()
    
19. static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
    0 b, x6 S' [7 Z* S
20. {
    
21.     //把指定区域的显示缓冲区内容写入到屏幕
    
22.     //LCD_Color_Fill(area->x1,area->y1,area->x2,area->y2,(u16*)color_p);//TODO
    - y: _. k8 c% n  L4 j; W7 o
23.     DMA_Fill_Color(area->x1,area->y1,area->x2,area->y2,(u16*)color_p);
    / t* }% k* f# [
24.     lv_disp_flush_ready(disp_drv);//最后必须得调用,通知 lvgl 库你已经 flushing 拷贝完成了
    ' K' ^7 ~" z5 j' f' B5 c  _
25. }
    4 |. e, v5 G- v2 ]
26. //DMA_Fill_Color或者LCD_Color_Fill函数需要根据你自己的平台实现
    

复制代码

lv_port_indev.c
6 g- C4 P1 }  B7 s: Y& d8 _
% n3 k% c  g/ N

1. static bool touchpad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
   
2. {
   & R$ k7 x% m2 O! `7 w% L% \
3.                 static uint16_t last_x = 0;
   
4.                 static uint16_t last_y = 0;
   
5.                 Tp_dev.scan();
   ! U9 B( e  G% z$ E4 X- x
6.                 if(Tp_dev.sta&0x80)//触摸按下了
   # s5 A: f7 b" d% Z
7.                 {
   
8.                         last_x = Tp_dev.X[0];
   6 A- _) @, V+ s: G" f
9.                         last_y = Tp_dev.Y[0];//竖屏
   2 t+ L8 H3 A+ k; T  @
10.                        
    . J! [/ V! A( H( m+ d  Z+ k: T  O
11.                         data->point.x = last_x;
    7 H* n4 c7 l1 F# X& d% s
12.                         data->point.y = last_y;
    3 H' p1 T& M  y5 f2 N* j# p% j
13.                         data->state = LV_INDEV_STATE_PR;
    ) n0 \( L- a5 s, f% {, x4 R; O# }
14.                 }else{
    4 [: u( g) \- m$ {  ~* T
15.                         data->point.x = last_x;
    
16.                         data->point.y = last_y;
    ' |: H" H: D, P. O; j- }0 ]6 J
17.                         data->state = LV_INDEV_STATE_REL;
    4 R  t) w& x2 D% Z4 o
18.                 }
    
19.     return false;
    & n9 \8 ], y$ T1 d* W
20. }
    7 k+ K  W  N8 @- W+ ^+ H2 \
21. //Tp_dev.scan() 是触摸屏驱动层的函数
    3 Y5 ^, `7 D( c% a4 D. R2 b
22. //其作用是扫描整块儿屏幕，得到触摸状态写入Tp_dev.sta中，如果有触摸点按下，得到其坐标并存入Tp_dev.X和Tp_dev.Y数组中
    
23. //因此这个函数需要根据你自己的板子和屏幕提供
    : u8 ^0 d) U3 b% X# Q

复制代码

六、源码
' N! C3 c7 s" k, L2 M9 Z本篇文章中移植的源码
3 {, R: G' w! V' U' E6 {移植前的工程模板：https://github.com/jesons007/LVGL_7.1.0_STM32/tree/Blank_Temp
移植好的代码：https://github.com/jesons007/LVGL_7.1.0_STM32
! L1 w8 o$ c! @
; x& o# b: ^8 z6 z# m6 g8 ]2 N

流畅度怎么样啊，有没有效果视频看？
4 n, k; C2 S' d