Logo
8.2
  • Introduction （介绍）
    • Key features （主要特性）
    • Requirements（配置要求）
    • License（许可证）
    • Repository layout （仓库布局）
    • Release policy（发布策略）
      • Release cycle（发布周期）
      • Branches（分支）
      • Changelog（变更日志）
      • Version support(版本支持)
    • FAQ（常见问题）
      • Where can I ask questions?（我可以在哪里提问？）
      • Is my MCU/hardware supported?（LVGL是否支持我的 MCU/硬件？）
      • Is my display supported?（支持我的显示器吗？）
      • Nothing happens, my display driver is not called. What have I missed?（没有任何反应，我的显示驱动程序没有被调用。我错过了什么？）
      • Why the display driver is called only once? Only the upper part of the display is refreshed. （为什么显示驱动程序只调用一次？仅刷新显示的上部。）
      • Why I see only garbage on the screen?（为什么我在屏幕上只看到垃圾？）
      • Why I see non-sense colors on the screen? （为什么我在屏幕上看到无意义的颜色？）
      • How to speed up my UI?（如何加速我的用户界面？）
      • How to reduce flash/ROM usage?（如何减少闪存/ROM的使用？）
      • How to reduce the RAM usage（如何减少内存使用）
      • How to work with an operating system?（如何使用操作系统？）
  • Examples
    • Get started
    • Styles
      • Size styles
      • Background styles
      • Border styles
      • Outline styles
      • Shadow styles
      • Image styles
      • Text styles
      • Line styles
      • Transition
      • Using multiple styles
      • Local styles
      • Add styles to parts and states
      • Extending the current theme
    • Animations
      • Start animation on an event
      • Playback animation
      • Animation timeline
    • Events
      • Button click event
      • Handle multiple events
      • Event bubbling
    • Layouts
      • Flex
        • A simple row and a column layout with flexbox
        • Arrange items in rows with wrap and even spacing
        • Demonstrate flex grow
        • Demonstrate flex grow.
        • Demonstrate column and row gap style properties
        • RTL base direction changes order of the items
      • Grid
        • A simple grid
        • Demonstrate cell placement and span
        • Demonstrate grid's "free unit"
        • Demonstrate track placement
        • Demonstrate column and row gap
        • Demonstrate RTL direction on grid
    • Scrolling
      • Nested scrolling
      • Snapping
      • Floating button
      • Styling the scrollbars
      • Right to left scrolling
      • Translate on scroll
    • Widgets
      • Base object
        • Base objects with custom styles
        • Make an object draggable
      • Arc
        • Simple Arc
        • Loader with Arc
      • Bar
        • Simple Bar
        • Styling a bar
        • Temperature meter
        • Stripe pattern and range value
        • Bar with LTR and RTL base direction
        • Custom drawer to show the current value
      • Button
        • Simple Buttons
        • Styling buttons
        • Gummy button
      • Button matrix
        • Simple Button matrix
        • Custom buttons
        • Pagination
      • Calendar
        • Calendar with header
      • Canvas
        • Drawing on the Canvas and rotate
        • Transparent Canvas with chroma keying
      • Chart
        • Line Chart
        • Faded area line chart with custom division lines
        • Axis ticks and labels with scrolling
        • Show the value of the pressed points
        • Display 1000 data points with zooming and scrolling
        • Show cursor on the clicked point
        • Scatter chart
        • Stacked area chart
      • Checkbox
        • Simple Checkboxes
        • Checkboxes as radio buttons
      • Colorwheel
        • Simple Colorwheel
      • Dropdown
        • Simple Drop down list
        • Drop down in four directions
        • Menu
      • Image
        • Image from variable and symbol
        • Image recoloring
        • Rotate and zoom
        • Image offset and styling
      • Image button
        • Simple Image button
      • Keyboard
        • Keyboard with text area
      • Label
        • Line wrap, recoloring and scrolling
        • Text shadow
        • Show LTR, RTL and Chinese texts
        • Draw label with gradient color
      • LED
        • LED with custom style
      • Line
        • Simple Line
      • List
        • Simple List
        • Sorting a List using up and down buttons
      • Meter
        • Simple meter
        • A meter with multiple arcs
        • A clock from a meter
        • Pie chart
      • Message box
        • Simple Message box
      • Roller
        • Simple Roller
        • Styling the roller
        • add fade mask to roller
      • Slider
        • Simple Slider
        • Slider with custom style
        • Slider with extended drawer
      • Span
        • Span with custom styles
      • Spinbox
        • Simple Spinbox
      • Spinner
        • Simple spinner
      • Switch
        • Simple Switch
      • Table
        • Simple table
        • Lightweighted list from table
      • Tabview
        • Simple Tabview
        • Tabs on the left, styling and no scrolling
      • Textarea
        • Simple Text area
        • Text area with password field
        • Text auto-formatting
      • Tabview
        • Tileview with content
      • Window
        • Simple window
  • Get started（开始）
    • Quick overview （快速概览）
      • Get started in a simulator（从模拟器开始）
      • Add LVGL into your project（将 LVGL 添加到您的项目中）
      • Learn the basics（学习基础知识）
        • Widgets（部件）
        • Events（事件）
        • Parts（部分）
        • States（状态）
        • Styles（样式）
        • Themes
      • Examples
      • Micropython
    • Simulator on PC（PC上的模拟器）
      • Select an IDE（选择适合的IDE）
      • Set-up Eclipse CDT（使用 Eclipse CDT 开发）
        • Install Eclipse CDT（安装 Eclipse CDT）
        • Install SDL 2（安装 SDL 2）
        • Pre-configured project（预配置项目）
        • Add the pre-configured project to Eclipse CDT（将预先配置的项目添加到 Eclipse CDT）
        • Compile and Run（编译并运行）
    • STM32
    • NXP
      • Creating new project with LVGL
      • Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects
        • Features supported:
        • Basic configuration:
        • Basic initialization:
        • Project setup:
        • Advanced configuration:
    • Espressif (ESP32 chip series)
      • LVGL demo project for ESP32
      • Using LVGL in your ESP-IDF project
        • Prerequisites
        • Obtaining LVGL
        • Configuration
      • Using lvgl_esp32_drivers in ESP-IDF project
    • Arduino
      • Get the LVGL Arduino library
      • Set up drivers
      • Configure LVGL
      • Initialize and run LVGL
      • Use the examples and demos
      • Debugging and logging
    • Micropython
      • What is Micropython?
        • Highlights of Micropython
      • Why Micropython + LVGL?
        • Here are some advantages of using LVGL in Micropython:
        • Micropython + LVGL could be used for:
      • So what does it look like?
        • A simple example
      • How can I use it?
        • Online Simulator
        • PC Simulator
        • Embedded platform
      • Where can I find more information?
    • Tasmota and berry
      • What is Tasmota?
      • What is Berry?
        • Highlights of Berry
      • Why LVGL + Tasmota + Berry?
        • Tasmota + Berry + LVGL could be used for:
      • So what does it look like?
        • A simple example
      • How can I use it?
      • Where can I find more information?
        • Tasmota Documentation
        • Berry Documentation
        • Tasmota LVGL Berry documentation
    • NuttX RTOS
      • What is NuttX?
        • Highlights of NuttX
      • Why NuttX + LVGL?
        • Here are some advantages of using LVGL in NuttX
        • NuttX + LVGL could be used for
      • How to get started with NuttX and LVGL?
        • First you need to install the pre-requisites on your system
        • Now let's create a workspace to save our files
        • Clone the NuttX and Apps repositories:
        • Configure NuttX to use the stm32f429i-disco board and the LVGL Demo
        • Flashing the firmware in the board using OpenOCD:
      • Where can I find more information?
    • CMake
      • Espressif (ESP32)
      • MicroPython
      • Zephyr
      • Prerequisites
        • Make
        • Ninja
      • Building LVGL with CMake
        • Additional CMake options
      • Building LVGL examples with CMake
      • Building LVGL drivers and demos with CMake
  • Porting（移植）
    • Set-up a project（设置项目）
      • Get the library（获取LVGL图形库）
      • Configuration file（修改配置文件）
      • Initialization（初始化）
    • Display interface（显示接口）
      • Draw buffer（绘制缓冲区）
      • Display driver（显示驱动程序）
        • Mandatory fields（必须要适配的部分）
        • Optional fields （可选的部分）
        • Examples（示例）
      • Rotation（旋转屏幕）
      • Further reading（深入学习）
      • API
    • Input device interface（输入设备接口）
      • Types of input devices（输入设备的类型）
        • Touchpad, mouse or any pointer（触摸板、鼠标或任何指针）
        • Keypad or keyboard（键盘或键盘）
        • Encoder（编码器）
        • Button（按钮）
      • Other features（其它功能）
        • Parameters（参数）
        • Feedback（回调处理）
        • Associating with a display（与显示器关联）
        • Buffered reading（缓冲读取）
      • Further reading（深入学习）
      • API
    • Tick interface（心跳接口）
      • API
    • Task Handler（任务处理器）
    • Sleep management（睡眠管理）
    • Operating system and interrupts（操作系统和中断）
      • Tasks and threads（任务和线程）
      • Interrupts（中断）
    • Logging（日志）
      • Log level（日记等级）
      • Printing logs（打印日志）
        • Logging with printf（使用 printf 记录）
        • Custom log function（自定义日志功能）
      • Add logs（添加日志）
  • Overview（概览）
    • Objects（对象）
      • Attributes（属性）
        • Basic attributes（基本属性）
        • Specific attributes（特定属性）
      • Working mechanisms（工作机制）
        • Parent-child structure（父子结构）
        • Moving together（一起移动）
        • Visibility only on the parent（仅在父对象上可见）
        • Create and delete objects（创建和删除对象）
      • Screens（屏幕）
        • Create screens（创建屏幕）
        • Get the active screen（获取活动屏幕）
        • Load screens（加载屏幕）
        • Layers（层）
        • Handling multiple displays（处理多个显示器）
      • Parts（部分）
      • States（状态）
      • Snapshot（快照）
    • Positions, sizes, and layouts（位置、大小和布局）
      • Overview（概述）
        • Units（单位）
        • Boxing model（盒子模型）
        • Important notes（重要笔记）
      • Position（位置）
        • Simple way（最简单的方法）
        • Align（对齐）
      • Size（大小）
        • Simple way（最简单的方法）
      • Using styles（使用样式）
      • Translation（风格样式转换）
      • Transformation（转换）
        • Min and Max size（最小和最大尺寸）
      • Layout（布局）
        • Overview（概述）
        • Built-in layout
        • Flags（标志）
        • Adding new layouts（添加新布局）
      • Examples
    • Styles（风格样式）
      • States（状态）
      • Cascading styles（层叠样式）
      • Inheritance（继承）
      • Parts
      • Initialize styles and set/get properties（初始化样式和设置/获取属性）
      • Add and remove styles to a widget（向部件添加和删除样式）
        • Add styles（添加样式）
        • Remove styles（删除样式）
        • Report style changes（通知样式更改）
        • Get a property's value on an object（获取对象的属性值）
      • Local styles（本地样式）
      • Properties（属性）
        • Typical background properties（典型的背景属性）
      • Transitions（过渡特效）
      • Color filter（色彩过滤）
      • Themes（主题）
        • Extending themes（扩展主题）
      • Examples
        • Size styles
        • Background styles
        • Border styles
        • Outline styles
        • Shadow styles
        • Image styles
        • Arc styles
        • Text styles
        • Line styles
        • Transition
        • Using multiple styles
        • Local styles
        • Add styles to parts and states
        • Extending the current theme
      • API
    • Style properties
      • Size and position
        • width
        • min_width
        • max_width
        • height
        • min_height
        • max_height
        • x
        • y
        • align
        • transform_width
        • transform_height
        • translate_x
        • translate_y
        • transform_zoom
        • transform_angle
      • Padding
        • pad_top
        • pad_bottom
        • pad_left
        • pad_right
        • pad_row
        • pad_column
      • Miscellaneous
        • radius
        • clip_corner
        • opa
        • color_filter_dsc
        • color_filter_opa
        • anim_time
        • anim_speed
        • transition
        • blend_mode
        • layout
        • base_dir
      • Background
        • bg_color
        • bg_opa
        • bg_grad_color
        • bg_grad_dir
        • bg_main_stop
        • bg_grad_stop
        • bg_img_src
        • bg_img_opa
        • bg_img_recolor
        • bg_img_recolor_opa
        • bg_img_tiled
      • Border
        • border_color
        • border_opa
        • border_width
        • border_side
        • border_post
      • Text
        • text_color
        • text_opa
        • text_font
        • text_letter_space
        • text_line_space
        • text_decor
        • text_align
      • Image
        • img_opa
        • img_recolor
        • img_recolor_opa
      • Outline
        • outline_width
        • outline_color
        • outline_opa
        • outline_pad
      • Shadow
        • shadow_width
        • shadow_ofs_x
        • shadow_ofs_y
        • shadow_spread
        • shadow_color
        • shadow_opa
      • Line
        • line_width
        • line_dash_width
        • line_dash_gap
        • line_rounded
        • line_color
        • line_opa
      • Arc
        • arc_width
        • arc_rounded
        • arc_color
        • arc_opa
        • arc_img_src
    • Scroll（滚动）
      • Overview（概述）
        • Scrollbar（滚动条）
        • Events(事件)
      • Basic example（基本示例）
      • Features of scrolling（滚动的特点）
        • Scrollable（滚动效果）
        • Scroll chain（滚动条）
        • Scroll momentum（滚动惯性效果）
        • Elastic scroll（弹性卷轴效果）
        • Snapping（捕捉）
        • Scroll one(只滚动一个)
        • Scroll on focus（滚动焦点）
      • Scroll manually
      • Self size（自身尺寸）
      • Examples
        • Nested scrolling
        • Snapping
        • Floating button
        • Styling the scrollbars
        • Right to left scrolling
        • Translate on scroll
    • Layers（图层）
      • Order of creation（图层顺序）
      • Bring to the foreground（前台展示）
      • Top and sys layers（顶层和系统层）
    • Events（事件）
      • Add events to the object
      • Remove event(s) from an object(从对象中删除事件)
      • Event codes
        • Input device events（输入设备事件）
        • Drawing events（绘图事件）
        • Other events（其他事件）
        • Special events（特殊事件）
        • Custom events（自定义事件）
      • Sending events（发送事件）
        • Refresh event（刷新事件）
      • Fields of lv_event_t（lv_event_t 的字段）
      • Event bubbling（事件冒泡）
      • Examples
        • Button click event
        • Handle multiple events
        • Event bubbling
    • Input devices（输入设备）
      • Pointers（光标）
        • Gestures (手势)
      • Keypad and encoder（键盘和编码器）
        • Groups（组）
        • Styling（风格样式）
      • API
        • Input device（输入设备）
        • Groups（组）
    • Displays（显示）
      • Multiple display support（多显示器支持）
        • Using only one display（仅使用一个显示器）
        • Mirror display（镜像显示）
        • Split image（分割图像）
      • Screens（屏幕）
        • Transparent screens（透明屏幕）
      • Features of displays（显示器的特点）
        • Inactivity（不活动）
        • Background（背景）
      • API
    • Colors（颜色）
      • Creating colors（创造色彩）
        • RGB（三原色）
        • HSV（色调饱和值-Hue Saturation Value）
        • Palette（调色板）
        • Modify and mix colors（修改和混合颜色）
        • Built-in colors（内置颜色）
      • Opacity（不透明度）
      • Color types（颜色类型）
        • Convert color（颜色转换）
      • API
    • Fonts（字体）
      • Unicode support（支持Unicode编码）
      • Built-in fonts（内置字体）
        • Normal fonts（普通字体）
        • Special fonts（特殊字体）
      • Special features（特殊功能）
        • Bidirectional support（双向支持）
        • Arabic and Persian support(阿拉伯语和波斯语支持)
        • Subpixel rendering（亚像素渲染）
        • Compress fonts（压缩字体）
      • Add new font（添加新字体）
      • Add new symbols（添加新符号）
      • Load font at run-time（在运行时加载字体）
      • Add a new font engine（添加新的字体引擎）
    • Images（图象）
      • Store images（存储图像）
        • Variables（变量）
        • Files（文件）
      • Color formats（颜色格式）
      • Add and use images（添加和使用图像）
        • Online converter（在线转换器）
        • Manually create an image（手动创建图像）
        • Use images（使用图片）
      • Image decoder（图像解码器）
        • Custom image formats（自定义图像格式）
        • Register an image decoder（注册图像解码器）
        • Manually use an image decoder（手动使用图像解码器）
      • Image caching（图片缓存）
        • Cache size（缓存大小）
        • Value of images（图片的价值）
        • Memory usage（内存使用情况）
        • Clean the cache（清理缓存）
      • API
        • Image buffer（图像缓冲区）
    • File system（文件系统）
      • Ready to use drivers（准备使用驱动程序）
      • Add a driver（添加驱动程序）
        • Registering a driver（注册驱动）
        • Implementing the callbacks（实现回调）
        • Other callbacks（其他回调）
      • Usage example（使用示例）
      • Use drivers for images（使用图像驱动程序）
      • API
    • Animations（动画）
      • Create an animation（创建动画）
      • Animation path（动画轨迹）
      • Speed vs time（速度与时间）
      • Delete animations（删除动画）
      • Timeline（时间线）
      • Examples
        • Start animation on an event
        • Playback animation
        • Animation timeline
      • API
    • Timers（定时器）
      • Create a timer（创建定时器）
      • Ready and Reset（准备与重置）
      • Set parameters(参数设置)
      • Repeat count(设置重复次数)
      • Measure idle time(测量空闲时间)
      • Asynchronous calls(异步调用)
      • API
    • Drawing（绘画）
      • Mechanism of screen refreshing（屏幕刷新机制）
      • Masking（蒙版）
      • Hook drawing（挂钩绘图）
        • Main drawing（主图）
        • Post drawing（后绘图）
        • Part drawing（零件绘图）
        • Others（其他）
    • New widget
  • Widgets（组件）
    • Base object（基础对象） (lv_obj)
      • Overview
        • Coordinates（坐标）
        • Parents and children（父母和孩子）
        • Display and Screens(显示和屏幕)
        • Events（事件）
        • Styles（样式）
        • Flags（宏开关）
        • Groups
        • Extended click area（拓展的点击区域）
      • Events（事件）
      • Keys
      • Example
        • Base objects with custom styles
        • Make an object draggable
      • API
    • Core widgets（核心组件）
      • Arc（圆弧） (lv_arc)
        • Overview（概述）
        • Parts and Styles
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Bar（进度条） (lv_bar)
        • Overview（概述）
        • Parts and Styles（零件和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Button（按钮） (lv_btn)
        • Overview
        • Parts and Styles（零件和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Button matrix（按钮矩阵） (lv_btnmatrix)
        • Overview（概述）
        • Parts and Styles（零件和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Canvas（画布） (lv_canvas)
        • Overview（概述）
        • Parts and Styles（零件和风格）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Checkbox（复选框） (lv_checkbox)
        • Overview（概述）
        • Parts and Styles（部分和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Drop-down list（下拉列表） (lv_dropdown)
        • Overview（概述）
        • Parts and Styles（部分和样式）
        • Usage（用法）
        • Overview（概述）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Image（图象） (lv_img)
        • Overview（概述）
        • Parts and Styles（部分和风格）
        • Usage（用法）
        • Transformations（转换）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Label（标签） (lv_label)
        • Overview（概述）
        • Parts and Styles（部分和风格）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Line（线条） (lv_line)
        • Overview（概述）
        • Parts and Styles（零件和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Roller（滚轮） (lv_roller)
        • Overview（概述）
        • Parts and Styles（零件和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Slider（滑动条） (lv_slider)
        • Overview（概述）
        • Parts and Styles（部分和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Switch（开关） (lv_switch)
        • Overview（概述）
        • Parts and Styles（零件和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Table（表） (lv_table)
        • Overview
        • Parts and Styles（部分和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
      • Text area（文本框） (lv_textarea)
        • Overview（概述）
        • Parts and Styles（部分和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Example
        • API
    • Extra widgets
      • Animation Image (lv_animimg)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Calendar (lv_calendar)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Headers
        • Example
        • API
      • Chart (lv_chart)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Color wheel (lv_colorwheel)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Image button (lv_imgbtn)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Keyboard（键盘）(lv_keyboard)
        • Overview（概述）
        • Parts and Styles（部分和样式）
        • Usage（用法）
        • Events（事件）
        • Keys（按键）
        • Examples（示例）
        • API
      • LED (lv_led)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • List (lv_list)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Menu (lv_menu)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Meter (lv_meter)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Message box (lv_msgbox)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Span (lv_span)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Spinbox (lv_spinbox)
        • Overview
        • Parts and Styles
        • Events
        • Keys
        • Example
        • API
        • Example
      • Spinner (lv_spinner)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Tabview (lv_tabview)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Tile view (lv_tileview)
        • Overview
        • Parts and Styles
        • Usage
        • Events
        • Keys
        • Example
        • API
      • Window (lv_win)
        • Overview
        • Parts and Styles
        • Usage
        • Get the parts
        • Events
        • Keys
        • Example
        • API
  • Layouts（布局）
    • Flex（弹性布局）
      • Overview（概述）
      • Terms（约定）
      • Simple interface（简单接口）
        • Flex flow
        • Flex align
        • Flex grow
      • Style interface（样式接口）
      • Other features（其它功能）
        • RTL
        • New track（新轨道）
      • Example
        • A simple row and a column layout with flexbox
        • Arrange items in rows with wrap and even spacing
        • Demonstrate flex grow
        • Demonstrate flex grow.
        • Demonstrate column and row gap style properties
        • RTL base direction changes order of the items
      • API
    • Grid（网格布局）
      • Overview（概述）
      • Terms（约定）
      • Simple interface（简单的接口）
        • Grid descriptors
        • Grid items（网格项）
        • Grid align（网格对齐）
      • Style interface（样式接口）
      • Other features （其它功能）
        • RTL
      • Example
        • A simple grid
        • Demonstrate cell placement and span
        • Demonstrate grid's "free unit"
        • Demonstrate track placement
        • Demonstrate column and row gap
        • Demonstrate RTL direction on grid
      • API
  • 3rd party libraries（第 3 方库）
    • File System Interfaces(文件系统接口)
      • Usage(用法)
      • 拓展阅读
        • open和fopen有什么区别？
    • BMP decoder（BMP解码器）
      • Limitations（限制）
      • 拓展阅读
        • BMP图象格式
      • Example
        • Open a BMP image from file
      • API
    • JPG decoder（JPG解码器）
      • Overview（概述）
      • Usage（用法）
      • Converter（转换器）
        • Converting JPG to C array（转换JPG为C数组）
        • Converting JPG to SJPG （转换JPG为SJPG）
      • 拓展阅读
        • JPG图象格式
      • Example
        • Load an SJPG image
      • API
    • PNG decoder（PNG解码器）
      • 拓展阅读
        • PNG图象格式
      • Example
        • Open a PNG image from file and variable
      • API
    • GIF decoder（GIF解码器）
      • Convert GIF files to C array（将 GIF 文件转换为 C 数组）
      • Use GIF images from file（使用GIF文件）
      • Memory requirements（内存要求）
      • 拓展阅读
        • GIF图象格式
      • Example
        • Open a GIF image from file and variable
      • API
    • FreeType support
      • Install FreeType
      • Add FreeType to your project
      • Usage
      • Example
        • Open a front with FreeType
      • Learn more
      • API
    • QR code
      • Get started
      • Notes
      • Example
        • Create a QR Code
      • API
    • Lottie player
      • Build Rlottie
      • Usage
        • Use Rlottie from file
        • Use Rlottie from raw string data
      • Getting animations
      • Controlling animations
      • Example
        • Load a Lottie animation from raw data
        • Load a Lottie animation from a file
      • API
    • FFmpeg support
      • Install FFmpeg
      • Add FFmpeg to your project
      • Usage
      • Example
        • Decode image
        • Decode video
      • API
  • Others
    • Snapshot
      • Usage
        • Free the Image
        • Use Existing Buffer
      • Example
        • Simple snapshot example
      • API
    • Monkey
      • Usage
      • Example
        • Touchpad monkey example
        • Encoder monkey example
        • Button monkey example
      • API
    • Grid navigation
      • Usage
      • Focusable objects
      • Example
        • Basic grid navigation
        • Grid navigation on a list
        • Nested grid navigations
      • API
  • Contributing（贡献）
    • Introduction（介绍）
    • Pull request（拉取请求）
      • From GitHub（来自GitHub）
      • From command line（从命令行获取）
      • Commit message format（commit的格式）
    • Developer Certification of Origin (DCO)（开发者原产地认证 (DCO)）
      • Overview（概述）
      • Accepted licenses and copyright notices（接受的许可和版权声明）
        • Your own work（你自己的作品）
        • Use code from online source（使用来自网上的代码）
        • Use MIT licensed code（使用 MIT 许可代码）
        • Use GPL licensed code（使用 GPL 许可代码）
    • Ways to contribute（贡献方式）
      • Give LVGL a Star（给 LVGL 一颗星）
      • Tell what you have achieved（讲述你的成就）
      • Write examples（撰写实例）
      • Improve the docs（改进文档）
      • Report bugs（报告bug）
      • Send fixes（提交补丁）
      • Join the conversations in the Forum（参与论坛讨论）
      • Add features（添加功能）
      • Become a maintainer（成为维护者）
      • Move your project repository under LVGL organization（将您的项目库移到LVGL组织下）
  • Changelog
    • v8.2.0 31 January 2022
      • Overview
      • Breaking Changes
      • Architectural
      • New Features
      • Performance
      • Fixes
      • Examples
      • Docs
      • CI and tests
    • v8.1.0 10 November 2021
      • Overview
      • Breaking Changes
      • Architectural
      • New Features
      • Performance
      • Fixes
      • Examples
      • Docs
      • CI and tests
      • Others
    • v8.0.2 (16.07.2021)
    • v8.0.1 (14.06.2021)
    • v8.0.0 (01.06.2021)
      • Directory structure
      • Widget changes
      • New scrolling
      • New layouts
      • Styles
      • Events
      • Driver changes
      • Other changes
      • New release policy
      • Migrating from v7 to v8
    • v7.11.0 (16.03.2021)
      • New features
      • Bugfixes
    • v7.10.1 (16.02.2021)
      • Bugfixes
    • v7.10.0 (02.02.2021)
      • New features
      • Bugfixes
    • v7.9.1 (19.01.2021)
      • Bugfixes
    • v7.9.0 (05.01.2021)
      • New features
      • Bugfixes
    • v7.8.1 (15.12.2020)
      • Bugfixes
    • v7.8.0 (01.12.2020)
      • New features
      • Bugfixes
    • v7.7.2 (17.11.2020)
      • Bugfixes
    • v7.7.1 (03.11.2020)
      • Bugfixes
    • v7.7.0 (20.10.2020)
      • New features
      • Bugfixes
    • v7.6.1 (06.10.2020)
      • Bugfixes
    • v7.6.0 (22.09.2020)
      • New features
      • Bugfixes
    • v7.5.0 (15.09.2020)
      • New features
      • Bugfixes
    • v7.4.0 (01.09.2020)
      • New features
      • Bugfixes
    • v7.3.1 (18.08.2020)
      • Bugfixes
    • v7.3.0 (04.08.2020)
      • New features
      • Bugfixes
    • v7.2.0 (21.07.2020)
      • New features
      • Bugfixes
    • v7.1.0 (07.07.2020)
      • New features
      • Bugfixes
    • v7.0.2 (16.06.2020)
      • Bugfixes
    • v7.0.1 (01.06.2020)
      • Bugfixes
    • v7.0.0 (18.05.2020)
      • Documentation
      • Legal changes
      • New drawing system
      • New style system
      • GPU integration
      • Renames
      • Reworked and improved object
      • New object types
      • Others
      • Demos
      • New release policy
      • Migrating from v6 to v7
  • Roadmap
    • v8.2
    • Ideas
  • 项目实战
    • 在windwos模拟器运行lvgl(v8.0)
      • Code::Blocks上运行
        • 获取资料
        • 获取Code::Blocks并安装
        • 获取示例源码并运行
      • 在 Eclipse 上运行
      • 在 vscode 上运行
    • STM32F103 LVGL GUI DEMO效果
      • STM32F103 LVGL GUI DEMO源码
    • STM32MP157 LVGL GUI DEMO效果
      • STM32MP157 LVGL GUI DEMO源码
    • IMX6ULL LVGL GUI DEMO效果
      • IMX6ULL Linux LVGL GUI V2.0
        • 源码
      • IMX6ULL Linux LVGL GUI 1.0
        • 源码
    • ESP32 LVGL GUI DEMO效果
  • 开发实用工具
    • 显示中文
      • 中文字体文件
        • 思源字体
        • 更多字体
      • 常用汉字
        • 常用495个汉字
        • 常用3500个汉字
      • 字符集编码范围
        • 汉字 Unicode 编码范围
        • 拉丁字母 Unicode 编码范围
        • ASCII码表
      • 字体转换工具
        • lvgl官方在线转换工具
        • 使用教程
    • 等宽字体
      • 等宽字体文件下载
      • 更多字体
        • Adobe开源字体github主页
        • Adobe开源等宽字体仓库
      • 常用汉字
        • 常用495个汉字
        • 常用3500个汉字
      • 字符集编码范围
        • 汉字 Unicode 编码范围
        • 拉丁字母 Unicode 编码范围
        • ASCII码表
      • 字体转换工具
        • lvgl官方在线转换工具
        • 使用教程
    • 自定义SYMBOL(图标)字体
      • Unicode 转换为 utf-8 的工具
    • 让lvgl支持中文输入
      • 源码仓库
    • lv_lib_100ask
      • 源码仓库
  • 联系我们
  • 🔥加入技术交流群聊一起学习！
百问网LVGL中文教程文档
  • »
  • Widgets（组件） »
  • Extra widgets »
  • Menu (lv_menu)
  • 在 GitHub 上修改

Menu (lv_menu)¶

Overview¶

The menu widget can be used to easily create multi-level menus. It handles the traversal between pages automatically.

Parts and Styles¶

The menu widget is built from the following objects:

  • Main container: lv_menu_main_cont

    • Main header: lv_menu_main_header_cont

      • Back btn: lv_btn

        • Back btn icon: lv_img

    • Main page: lv_menu_page

  • Sidebar container: lv_menu_sidebar_cont

    • Sidebar header: lv_menu_sidebar_header_cont

      • Back btn: lv_btn

        • Back btn icon: lv_img

    • Sidebar page: lv_menu_page

Usage¶

Create a menu¶

lv_menu_create(parent) creates a new empty menu.

Header mode¶

The following header modes exist:

  • LV_MENU_HEADER_TOP_FIXED Header is positioned at the top.

  • LV_MENU_HEADER_TOP_UNFIXED Header is positioned at the top and can be scrolled out of view.

  • LV_MENU_HEADER_BOTTOM_FIXED Header is positioned at the bottom.

You can set header modes with lv_menu_set_mode_header(menu, LV_MENU_HEADER...).

Root back button mode¶

The following root back button modes exist:

  • LV_MENU_ROOT_BACK_BTN_DISABLED

  • LV_MENU_ROOT_BACK_BTN_ENABLED

You can set root back button modes with lv_menu_set_mode_root_back_btn(menu, LV_MENU_ROOT_BACK_BTN...).

Create a menu page¶

lv_menu_page_create(menu, title) creates a new empty menu page. You can add any widgets to the page.

Set a menu page in the main area¶

Once a menu page has been created, you can set it to the main area with lv_menu_set_page(menu, page). NULL to clear main and clear menu history.

Set a menu page in the sidebar¶

Once a menu page has been created, you can set it to the sidebar with lv_menu_set_sidebar_page(menu, page). NULL to clear sidebar.

Linking between menu pages¶

For instance, you have created a btn obj in the main page. When you click the btn obj, you want it to open up a new page, use lv_menu_set_load_page_event(menu, obj, new page).

Create a menu container, section, separator¶

The following objects can be created so that it is easier to style the menu:

lv_menu_cont_create(parent page) creates a new empty container.

lv_menu_section_create(parent page) creates a new empty section.

lv_menu_separator_create(parent page) creates a separator.

Events¶

  • LV_EVENT_VALUE_CHANGED Sent when a page is shown.

    • lv_menu_get_cur_main_page(menu) returns a pointer to menu page that is currently displayed in main.

    • lv_menu_get_cur_sidebar_page(menu) returns a pointer to menu page that is currently displayed in sidebar.

  • LV_EVENT_CLICKED Sent when a back btn in a header from either main or sidebar is clicked. LV_OBJ_FLAG_EVENT_BUBBLE is enabled on the buttons so you can add events to the menu itself.

    • lv_menu_back_btn_is_root(menu, btn) to check if btn is root back btn

See the events of the Base object too.

Learn more about Events.

Keys¶

No keys are handled by the menu widget.

Learn more about Keys.

Example¶

Simple Menu¶

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_MENU && LV_BUILD_EXAMPLES

void lv_example_menu_1(void)
{
    /*Create a menu object*/
    lv_obj_t * menu = lv_menu_create(lv_scr_act());
    lv_obj_set_size(menu, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_center(menu);

    lv_obj_t * cont;
    lv_obj_t * label;

    /*Create a sub page*/
    lv_obj_t * sub_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(sub_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Hello, I am hiding here");

    /*Create a main page*/
    lv_obj_t * main_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 1");

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 2");

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 3 (Click me!)");
    lv_menu_set_load_page_event(menu, cont, sub_page);

    lv_menu_set_page(menu, main_page);
}

#endif

MicroPython code  

 GitHub Simulator
# Create a menu object
menu = lv.menu(lv.scr_act())
menu.set_size(320, 240)
menu.center()

# Create a sub page
sub_page = lv.menu_page(menu, None)
cont = lv.menu_cont(sub_page)
label = lv.label(cont)
label.set_text("Hello, I am hiding here")

# Create a main page
main_page = lv.menu_page(menu, None)

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 1")

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 2")

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 3 (Click me!)")
menu.set_load_page_event(cont, sub_page)

menu.set_page(main_page)

Simple Menu with root btn¶

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_MENU && LV_USE_MSGBOX && LV_BUILD_EXAMPLES

static void back_event_handler(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);
    lv_obj_t * menu = lv_event_get_user_data(e);

    if(lv_menu_back_btn_is_root(menu, obj)) {
        lv_obj_t * mbox1 = lv_msgbox_create(NULL, "Hello", "Root back btn click.", NULL, true);
        lv_obj_center(mbox1);
    }
}

void lv_example_menu_2(void)
{
    lv_obj_t * menu = lv_menu_create(lv_scr_act());
    lv_menu_set_mode_root_back_btn(menu, LV_MENU_ROOT_BACK_BTN_ENABLED);
    lv_obj_add_event_cb(menu, back_event_handler, LV_EVENT_CLICKED, menu);
    lv_obj_set_size(menu, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_center(menu);

    lv_obj_t * cont;
    lv_obj_t * label;

    /*Create a sub page*/
    lv_obj_t * sub_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(sub_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Hello, I am hiding here");

    /*Create a main page*/
    lv_obj_t * main_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 1");

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 2");

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 3 (Click me!)");
    lv_menu_set_load_page_event(menu, cont, sub_page);

    lv_menu_set_page(menu, main_page);
}

#endif

MicroPython code  

 GitHub Simulator
def back_event_handler(e):
    obj = e.get_target()
    if menu.back_btn_is_root(obj):
        mbox1 = lv.msgbox(lv.scr_act(), "Hello", "Root back btn click.", None, True)
        mbox1.center()
       
# Create a menu object
menu = lv.menu(lv.scr_act())
menu.set_mode_root_back_btn(lv.menu.ROOT_BACK_BTN.ENABLED)
menu.add_event_cb(back_event_handler, lv.EVENT.CLICKED, None)
menu.set_size(320, 240)
menu.center()

# Create a sub page
sub_page = lv.menu_page(menu, None)
cont = lv.menu_cont(sub_page)
label = lv.label(cont)
label.set_text("Hello, I am hiding here")

# Create a main page
main_page = lv.menu_page(menu, None)

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 1")

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 2")

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 3 (Click me!)")
menu.set_load_page_event(cont, sub_page)

menu.set_page(main_page)

Simple Menu with custom header¶

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_MENU && LV_USE_USER_DATA && LV_BUILD_EXAMPLES

void lv_example_menu_3(void)
{
    /*Create a menu object*/
    lv_obj_t * menu = lv_menu_create(lv_scr_act());
    lv_obj_set_size(menu, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_center(menu);

    /*Modify the header*/
    lv_obj_t * back_btn = lv_menu_get_main_header_back_btn(menu);
    lv_obj_t * back_btn_label = lv_label_create(back_btn);
    lv_label_set_text(back_btn_label, "Back");

    lv_obj_t * cont;
    lv_obj_t * label;

    /*Create sub pages*/
    lv_obj_t * sub_1_page = lv_menu_page_create(menu, "Page 1");

    cont = lv_menu_cont_create(sub_1_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Hello, I am hiding here");

    lv_obj_t * sub_2_page = lv_menu_page_create(menu, "Page 2");

    cont = lv_menu_cont_create(sub_2_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Hello, I am hiding here");

    lv_obj_t * sub_3_page = lv_menu_page_create(menu, "Page 3");

    cont = lv_menu_cont_create(sub_3_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Hello, I am hiding here");

    /*Create a main page*/
    lv_obj_t * main_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 1 (Click me!)");
    lv_menu_set_load_page_event(menu, cont, sub_1_page);

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 2 (Click me!)");
    lv_menu_set_load_page_event(menu, cont, sub_2_page);

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 3 (Click me!)");
    lv_menu_set_load_page_event(menu, cont, sub_3_page);

    lv_menu_set_page(menu, main_page);
}

#endif

MicroPython code  

 GitHub Simulator
# Create a menu object
menu = lv.menu(lv.scr_act())
menu.set_size(320, 240)
menu.center()

# Create sub pages
sub_page_1 = lv.menu_page(menu, "Page 1")

cont = lv.menu_cont(sub_page_1)
label = lv.label(cont)
label.set_text("Hello, I am hiding here")

sub_page_2 = lv.menu_page(menu, "Page 2")

cont = lv.menu_cont(sub_page_2)
label = lv.label(cont)
label.set_text("Hello, I am hiding here")

sub_page_3 = lv.menu_page(menu, "Page 3")

cont = lv.menu_cont(sub_page_3)
label = lv.label(cont)
label.set_text("Hello, I am hiding here")

# Create a main page
main_page = lv.menu_page(menu, None)

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 1 (Click me!)")
menu.set_load_page_event(cont, sub_page_1)

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 2 (Click me!)")
menu.set_load_page_event(cont, sub_page_2)

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 3 (Click me!)")
menu.set_load_page_event(cont, sub_page_3)

menu.set_page(main_page)

Simple Menu with floating btn to add new menu page¶

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_MENU && LV_BUILD_EXAMPLES

static uint32_t btn_cnt = 1;
static lv_obj_t * main_page;
static lv_obj_t * menu;

static void float_btn_event_cb(lv_event_t * e)
{
    LV_UNUSED(e);

    btn_cnt++;

    lv_obj_t * cont;
    lv_obj_t * label;

    lv_obj_t * sub_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(sub_page);
    label= lv_label_create(cont);
    lv_label_set_text_fmt(label, "Hello, I am hiding inside %i", btn_cnt);

    cont = lv_menu_cont_create(main_page);
    label= lv_label_create(cont);
    lv_label_set_text_fmt(label, "Item %i", btn_cnt);
    lv_menu_set_load_page_event(menu, cont, sub_page);

    lv_obj_scroll_to_view_recursive(cont, LV_ANIM_ON);
}

void lv_example_menu_4(void)
{
    /*Create a menu object*/
    menu = lv_menu_create(lv_scr_act());
    lv_obj_set_size(menu, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_center(menu);

    lv_obj_t * cont;
    lv_obj_t * label;

    /*Create a sub page*/
    lv_obj_t * sub_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(sub_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Hello, I am hiding inside the first item");

    /*Create a main page*/
    main_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(main_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 1");
    lv_menu_set_load_page_event(menu, cont, sub_page);

    lv_menu_set_page(menu, main_page);

    /*Create floating btn*/
    lv_obj_t * float_btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(float_btn, 50, 50);
    lv_obj_add_flag(float_btn, LV_OBJ_FLAG_FLOATING);
    lv_obj_align(float_btn, LV_ALIGN_BOTTOM_RIGHT, -10, -10);
    lv_obj_add_event_cb(float_btn, float_btn_event_cb, LV_EVENT_CLICKED, menu);
    lv_obj_set_style_radius(float_btn, LV_RADIUS_CIRCLE, 0);
    lv_obj_set_style_bg_img_src(float_btn, LV_SYMBOL_PLUS, 0);
    lv_obj_set_style_text_font(float_btn, lv_theme_get_font_large(float_btn), 0);
}

#endif

MicroPython code  

 GitHub Simulator
btn_cnt = 1

def float_btn_event_cb(e):
    global btn_cnt
    btn_cnt += 1

    sub_page = lv.menu_page(menu, None)

    cont = lv.menu_cont(sub_page)
    label = lv.label(cont)
    label.set_text("Hello, I am hiding inside {:d}".format(btn_cnt))

    cont = lv.menu_cont(main_page)
    label = lv.label(cont)
    label.set_text("Item {:d}".format(btn_cnt))
    menu.set_load_page_event(cont, sub_page)

# Create a menu object
menu = lv.menu(lv.scr_act())
menu.set_size(320, 240)
menu.center()

# Create a sub page
sub_page = lv.menu_page(menu, None)

cont = lv.menu_cont(sub_page)
label = lv.label(cont)
label.set_text("Hello, I am hiding inside the first item")

# Create a main page
main_page = lv.menu_page(menu, None)

cont = lv.menu_cont(main_page)
label = lv.label(cont)
label.set_text("Item 1")
menu.set_load_page_event(cont, sub_page)

menu.set_page(main_page)

float_btn = lv.btn(lv.scr_act())
float_btn.set_size(50, 50)
float_btn.add_flag(lv.obj.FLAG.FLOATING)
float_btn.align(lv.ALIGN.BOTTOM_RIGHT, -10, -10)
float_btn.add_event_cb(float_btn_event_cb, lv.EVENT.CLICKED, None)
float_btn.set_style_radius(lv.RADIUS.CIRCLE, 0)
float_btn.set_style_bg_img_src(lv.SYMBOL.PLUS, 0)
float_btn.set_style_text_font(lv.theme_get_font_large(float_btn), 0)

Complex Menu¶

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_MENU && LV_USE_MSGBOX && LV_BUILD_EXAMPLES

enum {
    LV_MENU_ITEM_BUILDER_VARIANT_1,
    LV_MENU_ITEM_BUILDER_VARIANT_2
};
typedef uint8_t lv_menu_builder_variant_t;

static void back_event_handler(lv_event_t * e);
static void switch_handler(lv_event_t * e);
lv_obj_t * root_page;
static lv_obj_t * create_text(lv_obj_t * parent, const char * icon, const char * txt,
                                        lv_menu_builder_variant_t builder_variant);
static lv_obj_t * create_slider(lv_obj_t * parent,
                                   const char * icon, const char * txt, int32_t min, int32_t max, int32_t val);
static lv_obj_t * create_switch(lv_obj_t * parent,
                                   const char * icon, const char * txt, bool chk);

void lv_example_menu_5(void)
{
    lv_obj_t * menu = lv_menu_create(lv_scr_act());

    lv_color_t bg_color = lv_obj_get_style_bg_color(menu, 0);
    if(lv_color_brightness(bg_color) > 127) {
        lv_obj_set_style_bg_color(menu, lv_color_darken(lv_obj_get_style_bg_color(menu, 0), 10), 0);
    }else{
        lv_obj_set_style_bg_color(menu, lv_color_darken(lv_obj_get_style_bg_color(menu, 0), 50), 0);
    }
    lv_menu_set_mode_root_back_btn(menu, LV_MENU_ROOT_BACK_BTN_ENABLED);
    lv_obj_add_event_cb(menu, back_event_handler, LV_EVENT_CLICKED, menu);
    lv_obj_set_size(menu, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_center(menu);

    lv_obj_t * cont;
    lv_obj_t * section;

    /*Create sub pages*/
    lv_obj_t * sub_mechanics_page = lv_menu_page_create(menu, NULL);
    lv_obj_set_style_pad_hor(sub_mechanics_page, lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
    lv_menu_separator_create(sub_mechanics_page);
    section = lv_menu_section_create(sub_mechanics_page);
    create_slider(section, LV_SYMBOL_SETTINGS, "Velocity", 0, 150, 120);
    create_slider(section, LV_SYMBOL_SETTINGS, "Acceleration", 0, 150, 50);
    create_slider(section, LV_SYMBOL_SETTINGS, "Weight limit", 0, 150, 80);

    lv_obj_t * sub_sound_page = lv_menu_page_create(menu, NULL);
    lv_obj_set_style_pad_hor(sub_sound_page, lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
    lv_menu_separator_create(sub_sound_page);
    section = lv_menu_section_create(sub_sound_page);
    create_switch(section, LV_SYMBOL_AUDIO, "Sound", false);

    lv_obj_t * sub_display_page = lv_menu_page_create(menu, NULL);
    lv_obj_set_style_pad_hor(sub_display_page, lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
    lv_menu_separator_create(sub_display_page);
    section = lv_menu_section_create(sub_display_page);
    create_slider(section, LV_SYMBOL_SETTINGS, "Brightness", 0, 150, 100);

    lv_obj_t * sub_software_info_page = lv_menu_page_create(menu, NULL);
    lv_obj_set_style_pad_hor(sub_software_info_page, lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
    section = lv_menu_section_create(sub_software_info_page);
    create_text(section, NULL, "Version 1.0", LV_MENU_ITEM_BUILDER_VARIANT_1);

    lv_obj_t * sub_legal_info_page = lv_menu_page_create(menu, NULL);
    lv_obj_set_style_pad_hor(sub_legal_info_page, lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
    section = lv_menu_section_create(sub_legal_info_page);
    for(uint32_t i=0; i<15; i++){
        create_text(section, NULL, "This is a long long long long long long long long long text, if it is long enough it may scroll.", LV_MENU_ITEM_BUILDER_VARIANT_1);
    }

    lv_obj_t * sub_about_page = lv_menu_page_create(menu, NULL);
    lv_obj_set_style_pad_hor(sub_about_page, lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
    lv_menu_separator_create(sub_about_page);
    section = lv_menu_section_create(sub_about_page);
    cont = create_text(section, NULL, "Software information", LV_MENU_ITEM_BUILDER_VARIANT_1);
    lv_menu_set_load_page_event(menu, cont, sub_software_info_page);
    cont = create_text(section, NULL, "Legal information", LV_MENU_ITEM_BUILDER_VARIANT_1);
    lv_menu_set_load_page_event(menu, cont, sub_legal_info_page);

    lv_obj_t * sub_menu_mode_page = lv_menu_page_create(menu, NULL);
    lv_obj_set_style_pad_hor(sub_menu_mode_page, lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
    lv_menu_separator_create(sub_menu_mode_page);
    section = lv_menu_section_create(sub_menu_mode_page);
    cont = create_switch(section, LV_SYMBOL_AUDIO, "Sidebar enable", true);
    lv_obj_add_event_cb(lv_obj_get_child(cont, 2), switch_handler, LV_EVENT_VALUE_CHANGED, menu);

    /*Create a root page*/
    root_page = lv_menu_page_create(menu, "Settings");
    lv_obj_set_style_pad_hor(root_page, lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
    section = lv_menu_section_create(root_page);
    cont = create_text(section, LV_SYMBOL_SETTINGS, "Mechanics", LV_MENU_ITEM_BUILDER_VARIANT_1);
    lv_menu_set_load_page_event(menu, cont, sub_mechanics_page);
    cont = create_text(section, LV_SYMBOL_AUDIO, "Sound", LV_MENU_ITEM_BUILDER_VARIANT_1);
    lv_menu_set_load_page_event(menu, cont, sub_sound_page);
    cont = create_text(section, LV_SYMBOL_SETTINGS, "Display", LV_MENU_ITEM_BUILDER_VARIANT_1);
    lv_menu_set_load_page_event(menu, cont, sub_display_page);

    create_text(root_page, NULL, "Others", LV_MENU_ITEM_BUILDER_VARIANT_1);
    section = lv_menu_section_create(root_page);
    cont = create_text(section, NULL, "About", LV_MENU_ITEM_BUILDER_VARIANT_1);
    lv_menu_set_load_page_event(menu, cont, sub_about_page);
    cont = create_text(section, LV_SYMBOL_SETTINGS, "Menu mode", LV_MENU_ITEM_BUILDER_VARIANT_1);
    lv_menu_set_load_page_event(menu, cont, sub_menu_mode_page);

    lv_menu_set_sidebar_page(menu, root_page);

    lv_event_send(lv_obj_get_child(lv_obj_get_child(lv_menu_get_cur_sidebar_page(menu), 0), 0), LV_EVENT_CLICKED, NULL);
}

static void back_event_handler(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);
    lv_obj_t * menu = lv_event_get_user_data(e);

    if(lv_menu_back_btn_is_root(menu, obj)) {
        lv_obj_t * mbox1 = lv_msgbox_create(NULL, "Hello", "Root back btn click.", NULL, true);
        lv_obj_center(mbox1);
    }
}

static void switch_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * menu = lv_event_get_user_data(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        if(lv_obj_has_state(obj, LV_STATE_CHECKED)) {
            lv_menu_set_page(menu, NULL);
            lv_menu_set_sidebar_page(menu, root_page);
            lv_event_send(lv_obj_get_child(lv_obj_get_child(lv_menu_get_cur_sidebar_page(menu), 0), 0), LV_EVENT_CLICKED, NULL);
        }else {
            lv_menu_set_sidebar_page(menu, NULL);
            lv_menu_clear_history(menu); /* Clear history because we will be showing the root page later */
            lv_menu_set_page(menu, root_page);
        }
    }
}

static lv_obj_t * create_text(lv_obj_t * parent, const char * icon, const char * txt,
                                        lv_menu_builder_variant_t builder_variant)
{
    lv_obj_t * obj = lv_menu_cont_create(parent);

    lv_obj_t * img = NULL;
    lv_obj_t * label = NULL;

    if(icon) {
        img = lv_img_create(obj);
        lv_img_set_src(img, icon);
    }

    if(txt) {
        label = lv_label_create(obj);
        lv_label_set_text(label, txt);
        lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR);
        lv_obj_set_flex_grow(label, 1);
    }

    if(builder_variant == LV_MENU_ITEM_BUILDER_VARIANT_2 && icon && txt) {
        lv_obj_add_flag(img, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
        lv_obj_swap(img, label);
    }

    return obj;
}

static lv_obj_t * create_slider(lv_obj_t * parent, const char * icon, const char * txt, int32_t min, int32_t max, int32_t val)
{
    lv_obj_t * obj = create_text(parent, icon, txt, LV_MENU_ITEM_BUILDER_VARIANT_2);

    lv_obj_t * slider = lv_slider_create(obj);
    lv_obj_set_flex_grow(slider, 1);
    lv_slider_set_range(slider, min, max);
    lv_slider_set_value(slider, val, LV_ANIM_OFF);

    if(icon == NULL) {
        lv_obj_add_flag(slider, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    }

    return obj;
}

static lv_obj_t * create_switch(lv_obj_t * parent, const char * icon, const char * txt, bool chk)
{
    lv_obj_t * obj = create_text(parent, icon, txt, LV_MENU_ITEM_BUILDER_VARIANT_1);

    lv_obj_t * sw = lv_switch_create(obj);
    lv_obj_add_state(sw, chk ? LV_STATE_CHECKED : 0);

    return obj;
}

#endif

MicroPython code  

 GitHub Simulator
Error encountered while trying to open /home/runner/work/100ask_lvgl_docs/100ask_lvgl_docs/examples/widgets/menu/lv_example_menu_5.py

API¶

Typedefs

typedef uint8_t lv_menu_mode_header_t¶
typedef uint8_t lv_menu_mode_root_back_btn_t¶
typedef struct lv_menu_load_page_event_data_t lv_menu_load_page_event_data_t¶

Enums

enum [anonymous]¶

Values:

enumerator LV_MENU_HEADER_TOP_FIXED¶
enumerator LV_MENU_HEADER_TOP_UNFIXED¶
enumerator LV_MENU_HEADER_BOTTOM_FIXED¶
enum [anonymous]¶

Values:

enumerator LV_MENU_ROOT_BACK_BTN_DISABLED¶
enumerator LV_MENU_ROOT_BACK_BTN_ENABLED¶

Functions

lv_obj_t *lv_menu_create(lv_obj_t *parent)¶

Create a menu object

参数

parent -- pointer to an object, it will be the parent of the new menu

返回

pointer to the created menu

lv_obj_t *lv_menu_page_create(lv_obj_t *parent, char *title)¶

Create a menu page object

参数

  • parent -- pointer to menu object

  • title -- pointer to text for title in header (NULL to not display title)

返回

pointer to the created menu page

lv_obj_t *lv_menu_cont_create(lv_obj_t *parent)¶

Create a menu cont object

参数

parent -- pointer to an object, it will be the parent of the new menu cont object

返回

pointer to the created menu cont

lv_obj_t *lv_menu_section_create(lv_obj_t *parent)¶

Create a menu section object

参数

parent -- pointer to an object, it will be the parent of the new menu section object

返回

pointer to the created menu section

lv_obj_t *lv_menu_separator_create(lv_obj_t *parent)¶

Create a menu separator object

参数

parent -- pointer to an object, it will be the parent of the new menu separator object

返回

pointer to the created menu separator

void lv_menu_set_page(lv_obj_t *obj, lv_obj_t *page)¶

Set menu page to display in main

参数

  • obj -- pointer to the menu

  • page -- pointer to the menu page to set (NULL to clear main and clear menu history)

void lv_menu_set_sidebar_page(lv_obj_t *obj, lv_obj_t *page)¶

Set menu page to display in sidebar

参数

  • obj -- pointer to the menu

  • page -- pointer to the menu page to set (NULL to clear sidebar)

void lv_menu_set_mode_header(lv_obj_t *obj, lv_menu_mode_header_t mode_header)¶

Set the how the header should behave and its position

参数

  • obj -- pointer to a menu

  • mode_header --

void lv_menu_set_mode_root_back_btn(lv_obj_t *obj, lv_menu_mode_root_back_btn_t mode_root_back_btn)¶

Set whether back button should appear at root

参数

  • obj -- pointer to a menu

  • mode_root_back_btn --

void lv_menu_set_load_page_event(lv_obj_t *menu, lv_obj_t *obj, lv_obj_t *page)¶

Add menu to the menu item

参数

  • menu -- pointer to the menu

  • obj -- pointer to the obj

  • page -- pointer to the page to load when obj is clicked

lv_obj_t *lv_menu_get_cur_main_page(lv_obj_t *obj)¶

Get a pointer to menu page that is currently displayed in main

参数

obj -- pointer to the menu

返回

pointer to current page

lv_obj_t *lv_menu_get_cur_sidebar_page(lv_obj_t *obj)¶

Get a pointer to menu page that is currently displayed in sidebar

参数

obj -- pointer to the menu

返回

pointer to current page

lv_obj_t *lv_menu_get_main_header(lv_obj_t *obj)¶

Get a pointer to main header obj

参数

obj -- pointer to the menu

返回

pointer to main header obj

lv_obj_t *lv_menu_get_main_header_back_btn(lv_obj_t *obj)¶

Get a pointer to main header back btn obj

参数

obj -- pointer to the menu

返回

pointer to main header back btn obj

lv_obj_t *lv_menu_get_sidebar_header(lv_obj_t *obj)¶

Get a pointer to sidebar header obj

参数

obj -- pointer to the menu

返回

pointer to sidebar header obj

lv_obj_t *lv_menu_get_sidebar_header_back_btn(lv_obj_t *obj)¶

Get a pointer to sidebar header obj

参数

obj -- pointer to the menu

返回

pointer to sidebar header back btn obj

bool lv_menu_back_btn_is_root(lv_obj_t *menu, lv_obj_t *obj)¶

Check if an obj is a root back btn

参数

menu -- pointer to the menu

返回

true if it is a root back btn

void lv_menu_clear_history(lv_obj_t *obj)¶

Clear menu history

参数

obj -- pointer to the menu

Variables

const lv_obj_class_t lv_menu_class¶
const lv_obj_class_t lv_menu_page_class¶
const lv_obj_class_t lv_menu_cont_class¶
const lv_obj_class_t lv_menu_section_class¶
const lv_obj_class_t lv_menu_separator_class¶
const lv_obj_class_t lv_menu_sidebar_cont_class¶
const lv_obj_class_t lv_menu_main_cont_class¶
const lv_obj_class_t lv_menu_sidebar_header_cont_class¶
const lv_obj_class_t lv_menu_main_header_cont_class¶
struct lv_menu_load_page_event_data_t

Public Members

lv_obj_t *menu¶
lv_obj_t *page¶
struct lv_menu_history_t¶

Public Members

lv_obj_t *page¶
struct lv_menu_t¶

Public Members

lv_obj_t obj¶
lv_obj_t *storage¶
lv_obj_t *main¶
lv_obj_t *main_page¶
lv_obj_t *main_header¶
lv_obj_t *main_header_back_btn¶
lv_obj_t *main_header_title¶
lv_obj_t *sidebar¶
lv_obj_t *sidebar_page¶
lv_obj_t *sidebar_header¶
lv_obj_t *sidebar_header_back_btn¶
lv_obj_t *sidebar_header_title¶
lv_obj_t *selected_tab¶
lv_ll_t history_ll¶
uint8_t cur_depth¶
uint8_t prev_depth¶
uint8_t sidebar_generated¶
lv_menu_mode_header_t mode_header¶
lv_menu_mode_root_back_btn_t mode_root_back_btn¶
struct lv_menu_page_t¶

Public Members

lv_obj_t obj¶
char *title¶
下一页 上一页

© 版权所有 2008-2021 深圳百问网科技有限公司 All Rights Reserved. 最后更新于 2024 年 05 月 15 日.

利用 Sphinx 构建，使用了 主题 由 Read the Docs开发.