mirrors/lvgl
0
0
Fork 0
mirror of https://github.com/lvgl/lvgl.git synced 2024-11-27 03:33:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: add Chinese README (#5388)

Browse Source 
Signed-off-by: lhdjply <lhdjply@126.com>
Co-authored-by: Benign X <1341398182@qq.com>
This commit is contained in:
lhdjply 2024-01-19 21:18:32 +08:00 committed by GitHub
parent 24d8946daf
commit f470539f4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 613 additions and 494 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -2,7 +2,7 @@
<a href="https://github.com/sponsors/lvgl" target="_blank"><img align="left" src="https://lvgl.io/assets/images/sponsor.png" height="32px"></a>
<p align="right">
<b>English</b> | <a href="./docs/README_zh.md">中文</a> | <a href="./docs/README_pt_BR.md">Português do Brasil</a> | <a href="./docs/README_jp.md">日本語</a>
<b>English</b> | <a href="./docs/README_zh.rst">中文</a> | <a href="./docs/README_pt_BR.md">Português do Brasil</a> | <a href="./docs/README_jp.md">日本語</a>
</p>
<br>

612
docs/README_zh.rst Normal file
View File

@ -0,0 +1,612 @@
.. raw:: html
<p align="right">
<a href="../README.md">English</a>| <b>中文</b>| <a href="./docs/README_pt_BR.md">Português do Brasil</a> | <a href="./docs/README_jp.md">日本語</a>
</p>
.. raw:: html
<br>
.. raw:: html
<p align="center">
  <img src="https://lvgl.io/assets/images/logo_lvgl.png">
</p>
.. raw:: html
<h1 align="center">
轻量级通用型图形库
.. raw:: html
</h1>
.. raw:: html
<div align="center">
<img src="https://github.com/kisvegabor/test/raw/master/smartwatch_demo.gif">
&nbsp;
  <img border="1px" src="https://lvgl.io/assets/images/lvgl_widgets_demo.gif">
</div>
<br>
<p align="center">
<a href="https://lvgl.io" title="Homepage of LVGL">官网 </a> |
<a href="https://docs.lvgl.io/" title="Detailed documentation with 100+ examples">文档</a> |
<a href="https://forum.lvgl.io" title="Get help and help others">论坛</a> |
<a href="https://lvgl.io/demos" title="Demos running in your browser">示例</a> |
<a href="https://lvgl.io/services" title="Graphics design, UI implementation and consulting">服务</a> |
<a href="https://squareline.io/" title="UI Editor for LVGL">SquareLine Studio</a>
</p>
<br>
.. _ledger-概况与总览:
📒 概况与总览
-------------
**成熟且知名**\
LVGL 是最流行的免费开源嵌入式图形库，可以为任何 MCU、MPU 和显示类型创建漂亮的 UI。它得到了行业领先供应商和项目的支持，如 Arm、STM32、NXP、Espressif、Nuvoton、Arduino、RT-Thread、Zephyr、NuttX、Adafruit 等。
**功能丰富**\
它拥有创建现代美观 GUI 的所有功能：30 多个内置控件、强大的样式系统、Web 启发的布局管理器和支持多种语言的排版系统。要将 LVGL 集成到您的平台中，您只需要至少 32 KB
RAM 和 128 KB Flash、C 编译器、帧缓冲区和至少 1/10 屏幕大小的渲染缓冲区。
**UI编辑器**\
SquareLine Studio 是一款专业但价格合理的 LVGL 拖放 UI 编辑器。它也在 Windows 、Linux 和 MacOS 上运行，无需注册，免费试用。
**服务**\
我们的团队随时准备为您提供图形设计、UI 实现和咨询服务。如果您在开发下一个 GUI 项目时需要一些支持，请与我们联系。
.. _rocket-特性:
🚀 特性
-------
**免费和可移植性**
- 一个完全可移植的 C（C++ 兼容）库，没有外部依赖关系。
- 可以编译到任何 MCU 或 MPU，使用任何 RTOS 或者操作系统。
- 支持单色、ePaper、OLED、TFT 显示器或者模拟器。
`移植指南 <https://docs.lvgl.io/master/porting/project.html>`__
- 该项目使用 MIT 许可证，因此您可以在商业项目中轻松使用它。
- 仅需 32 KB RAM 和 128 KB Flash，一个帧缓冲区，以及至少 1/10 屏幕大小的渲染缓冲区。
- 支持使用可选的操作系统、外部存储器和 GPU。
**控件、样式、布局等**
- 30+ 内置\ `控件 <https://docs.lvgl.io/master/widgets/index.html>`__:
 按钮、标签、滑块、图表、键盘、仪表、弧形、表格等等。
- 灵活的\ `样式系统 <https://docs.lvgl.io/master/overview/style.html>`__
支持约 100 个样式属性，可在任何状态下自定义小控件的任何部分。
- `Flex 布局 <https://docs.lvgl.io/master/layouts/flex.html>`__ 和
`Grid 布局 <https://docs.lvgl.io/master/layouts/grid.html>`__
可以响应式自动调整小控件的大小和位置。
- 文本支持 UTF-8 编码，支持 CJK、泰语、印地语、阿拉伯语和波斯语书写系统。
- 支持自动换行、字距调整、文本滚动、亚像素渲染、拼音输入法、文本表情符号。
- 渲染引擎支持动画、抗锯齿、不透明度、平滑滚动、阴影、图形变换等。
- 支持鼠标、触摸板、小键盘、键盘、外部按钮、编码器\ `输入设备 <https://docs.lvgl.io/master/porting/indev.html>`__\ 。
- 支持\ `多显示器 <https://docs.lvgl.io/master/overview/disp.html#multiple-display-support>`__\ 。
**绑定和构建支持**
- `Microython 绑定 <https://blog.lvgl.io/2019-02-20/micropython-bindings>`__
公开 LVGL的API
- `PikaScript 绑定 <https://blog.lvgl.io/2022-08-24/pikascript-and-lvgl>`__
在 MCU 上的更轻更简单的 Python 版本
- 未使用自定义生成系统。您可以在构建项目的其他文件时构建 LVGL。
- 支持开箱即用的 Make 和 \ `CMake <https://docs.lvgl.io/master/get-started/platforms/cmake.html>`__\ 编译系统。
- 支持在 \ `PC 上开发 <https://docs.lvgl.io/master/get-started/platforms/pc-simulator.html>`__\ ，并可以在嵌入式硬件上使用相同的 UI 代码。
- 支持使用我们的 \ `Emscripten 移植 <https://github.com/lvgl/lv_web_emscripten>`__\ 从而将 C 写的 UI 代码转换为 HTML 文件。
**文档、工具和服务**
- 包含 \ `100 多个简单示例 <https://docs.lvgl.io/master/index.html>`__\ 的详细\ `文档 <https://docs.lvgl.io/>`__
- `SquareLine Studio <https://squareline.io/>`__ -
一款专业且易于使用的UI编辑器软件，可加快和简化 UI 开发。
- `服务 <https://lvgl.io/services>`__
如用户界面设计、实施和咨询，使 UI 开发更简单、更快。
.. _heart-赞助:
❤️ 赞助
-------
如果 LVGL 为您节省了大量时间和金钱，或者您只是在使用它时玩得很开心，请考虑\ `支持它的开发 <https://github.com/sponsors/lvgl>`__\ 。
**我们如何使用捐赠？**\
我们的目标是为 LVGL 做得最多的人提供经济补偿。这意味着不仅维护人员，而且任何实现伟大功能的人都应该从累积的资金中获得报酬。我们用捐款来支付服务器和相关服务等运营成本。
**如何捐赠？**\
我们使用 \ `GitHub Sponsors <https://github.com/sponsors/lvgl>`__\ ，您可以轻松发送一次性或定期捐款。您还可以以透明的方式查看我们的所有费用。
**如何从您的贡献中获取报酬？**\
如果有人实施或修复了一个标记为\ `赞助 <https://github.com/lvgl/lvgl/labels/Sponsored>`__\ 的问题，他或她将获得该工作的报酬。我们估计问题所需的时间、复杂性和重要性，并据此设定价格。直接评论一个赞助的问题，说“嗨，我想处理它。这就是我计划修复/实施它的方式…”。当维护人员批准并合并工作时，就认为它已经准备好了。之后，您可以在 \ `opencollective.com <https://opencollective.com/lvgl>`__\ 上提交并支付费用，几天后您将收到付款。
**支持 LVGL 的组织**\
|Sponsors of LVGL|
**支持 LVGL 的个人**\
|Backers of LVGL|
.. _package-支持包:
📦 支持包
---------
LVGL 可用于以下几种：
- `Arduino
library <https://docs.lvgl.io/master/integration/framework/arduino.html>`__
- `PlatformIO
package <https://registry.platformio.org/libraries/lvgl/lvgl>`__
- `Zephyr
library <https://docs.lvgl.io/master/integration/os/zephyr.html>`__
- `ESP-IDF(ESP32)
component <https://components.espressif.com/components/lvgl/lvgl>`__
- `NXP MCUXpresso
component <https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY>`__
- `NuttX
library <https://docs.lvgl.io/master/integration/os/nuttx.html>`__
- `RT-Thread
RTOS <https://docs.lvgl.io/master/integration/os/rt-thread.html>`__
- CMSIS-Pack
- `RIOT OS
package <https://doc.riot-os.org/group__pkg__lvgl.html#details>`__
.. _robot-示例:
🤖 示例
-------
请参阅创建小部件、使用布局和应用样式的一些示例。您将找到 C 和 MicroPython 代码，以及在在线 MicroPython 编辑器中尝试或编辑示例的链接。
如果要查看更多示例，可查看 \ `Examples <https://github.com/lvgl/lvgl/tree/master/examples>`__ 文件夹。
Hello world 标签
~~~~~~~~~~~~~~~~
.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_1.png
:alt: Simple Hello world label example in LVGL
.. raw:: html
<details>
<summary>C code</summary>
.. code:: c
/*Change the active screen's background color*/
lv_obj_set_style_bg_color(lv_screen_active(), lv_color_hex(0x003a57), LV_PART_MAIN);
/*Create a white label, set its text and align it to the center*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Hello world");
lv_obj_set_style_text_color(lv_screen_active(), lv_color_hex(0xffffff), LV_PART_MAIN);
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
.. raw:: html
</details>
.. raw:: html
<details>
<summary>MicroPython code | <a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_direct=4ab7c40c35b0dc349aa2f0c3b00938d7d8e8ac9f" target="_blank">在线模拟器</a></summary>
.. code:: python
# Change the active screen's background color
scr = lv.screen_active()
scr.set_style_bg_color(lv.color_hex(0x003a57), lv.PART.MAIN)
# Create a white label, set its text and align it to the center
label = lv.label(lv.screen_active())
label.set_text("Hello world")
label.set_style_text_color(lv.color_hex(0xffffff), lv.PART.MAIN)
label.align(lv.ALIGN.CENTER, 0, 0)
.. raw:: html
</details>
<br>
按钮与点击事件
~~~~~~~~~~~~~~
.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_2.gif
:alt: LVGL button with label example
.. raw:: html
<details>
<summary>C code</summary>
.. code:: c
lv_obj_t * button = lv_button_create(lv_screen_active());                   /*Add a button to the current screen*/
lv_obj_center(button);                                     /*Set its position*/
lv_obj_set_size(button, 100, 50);                                  /*Set its size*/
lv_obj_add_event_cb(button, button_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/
lv_obj_t * label = lv_label_create(button);                        /*Add a label to the button*/
lv_label_set_text(label, "Button");                             /*Set the labels text*/
lv_obj_center(label);                                           /*Align the label to the center*/
...
void button_event_cb(lv_event_t * e)
{
  printf("Clicked\n");
}
.. raw:: html
</details>
.. raw:: html
<details>
<summary>MicroPython code | <a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=926bde43ec7af0146c486de470c53f11f167491e" target="_blank">在线模拟器</a></summary>
.. code:: python
def button_event_cb(e):
  print("Clicked")
# Create a Button and a Label
button = lv.button(lv.screen_active())
button.center()
button.set_size(100, 50)
button.add_event_cb(button_event_cb, lv.EVENT.CLICKED, None)
label = lv.label(button)
label.set_text("Button")
label.center()
.. raw:: html
</details>
<br>
带布局的复选框
~~~~~~~~~~~~~~
.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_3.gif
:alt: Checkboxes with layout in LVGL
.. raw:: html
<details>
<summary>C code</summary>
.. code:: c
lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
lv_obj_t * cb;
cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Apple");
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Banana");
lv_obj_add_state(cb, LV_STATE_CHECKED);
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Lemon");
lv_obj_add_state(cb, LV_STATE_DISABLED);
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
cb = lv_checkbox_create(lv_screen_active());
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
lv_checkbox_set_text(cb, "Melon\nand a new line");
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
.. raw:: html
</details>
.. raw:: html
<details>
<summary>MicroPython code | <a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=311d37e5f70daf1cb0d2cad24c7f72751b5f1792" target="_blank">在线模拟器</a></summary>
.. code:: python
def event_handler(e):
code = e.get_code()
obj = e.get_target_obj()
if code == lv.EVENT.VALUE_CHANGED:
txt = obj.get_text()
if obj.get_state() & lv.STATE.CHECKED:
state = "Checked"
else:
state = "Unchecked"
print(txt + ":" + state)
lv.screen_active().set_flex_flow(lv.FLEX_FLOW.COLUMN)
lv.screen_active().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER)
cb = lv.checkbox(lv.screen_active())
cb.set_text("Apple")
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
cb = lv.checkbox(lv.screen_active())
cb.set_text("Banana")
cb.add_state(lv.STATE.CHECKED)
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
cb = lv.checkbox(lv.screen_active())
cb.set_text("Lemon")
cb.add_state(lv.STATE.DISABLED)
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
cb = lv.checkbox(lv.screen_active())
cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
cb.set_text("Melon")
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
.. raw:: html
</details>
<br>
设置滑块的样式
~~~~~~~~~~~~~~
.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_4.gif
:alt: Styling a slider with LVGL
.. raw:: html
<details>
<summary>C code</summary>
.. code:: c
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_slider_set_value(slider, 70, LV_ANIM_OFF);
lv_obj_set_size(slider, 300, 20);
lv_obj_center(slider);
/*Add local styles to MAIN part (background rectangle)*/
lv_obj_set_style_bg_color(slider, lv_color_hex(0x0F1215), LV_PART_MAIN);
lv_obj_set_style_bg_opa(slider, 255, LV_PART_MAIN);
lv_obj_set_style_border_color(slider, lv_color_hex(0x333943), LV_PART_MAIN);
lv_obj_set_style_border_width(slider, 5, LV_PART_MAIN);
lv_obj_set_style_pad_all(slider, 5, LV_PART_MAIN);
/*Create a reusable style sheet for the INDICATOR part*/
static lv_style_t style_indicator;
lv_style_init(&style_indicator);
lv_style_set_bg_color(&style_indicator, lv_color_hex(0x37B9F5));
lv_style_set_bg_grad_color(&style_indicator, lv_color_hex(0x1464F0));
lv_style_set_bg_grad_dir(&style_indicator, LV_GRAD_DIR_HOR);
lv_style_set_shadow_color(&style_indicator, lv_color_hex(0x37B9F5));
lv_style_set_shadow_width(&style_indicator, 15);
lv_style_set_shadow_spread(&style_indicator, 5);
4
/*Add the style sheet to the slider's INDICATOR part*/
lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);
/*Add the same style to the KNOB part too and locally overwrite some properties*/
lv_obj_add_style(slider, &style_indicator, LV_PART_KNOB);
lv_obj_set_style_outline_color(slider, lv_color_hex(0x0096FF), LV_PART_KNOB);
lv_obj_set_style_outline_width(slider, 3, LV_PART_KNOB);
lv_obj_set_style_outline_pad(slider, -5, LV_PART_KNOB);
lv_obj_set_style_shadow_spread(slider, 2, LV_PART_KNOB);
.. raw:: html
</details>
.. raw:: html
<details>
<summary>MicroPython code |
<a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=c431c7b4dfd2cc0dd9c392b74365d5af6ea986f0" target="_blank">在线模拟器</a>
</summary>
.. code:: python
# Create a slider and add the style
slider = lv.slider(lv.screen_active())
slider.set_value(70, lv.ANIM.OFF)
slider.set_size(300, 20)
slider.center()
# Add local styles to MAIN part (background rectangle)
slider.set_style_bg_color(lv.color_hex(0x0F1215), lv.PART.MAIN)
slider.set_style_bg_opa(255, lv.PART.MAIN)
slider.set_style_border_color(lv.color_hex(0x333943), lv.PART.MAIN)
slider.set_style_border_width(5, lv.PART.MAIN)
slider.set_style_pad_all(5, lv.PART.MAIN)
# Create a reusable style sheet for the INDICATOR part
style_indicator = lv.style_t()
style_indicator.init()
style_indicator.set_bg_color(lv.color_hex(0x37B9F5))
style_indicator.set_bg_grad_color(lv.color_hex(0x1464F0))
style_indicator.set_bg_grad_dir(lv.GRAD_DIR.HOR)
style_indicator.set_shadow_color(lv.color_hex(0x37B9F5))
style_indicator.set_shadow_width(15)
style_indicator.set_shadow_spread(5)
# Add the style sheet to the slider's INDICATOR part
slider.add_style(style_indicator, lv.PART.INDICATOR)
slider.add_style(style_indicator, lv.PART.KNOB)
# Add the same style to the KNOB part too and locally overwrite some properties
slider.set_style_outline_color(lv.color_hex(0x0096FF), lv.PART.KNOB)
slider.set_style_outline_width(3, lv.PART.KNOB)
slider.set_style_outline_pad(-5, lv.PART.KNOB)
slider.set_style_shadow_spread(2, lv.PART.KNOB)
.. raw:: html
</details>
<br>
英语、希伯来语（ 双向文本排版 ）和中文
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_5.png
:alt: English, Hebrew and Chinese texts with LVGL
.. raw:: html
<details>
<summary>C code</summary>
.. code:: c
lv_obj_t * ltr_label = lv_label_create(lv_screen_active());
lv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");
lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
lv_obj_set_width(ltr_label, 310);
lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);
lv_obj_t * rtl_label = lv_label_create(lv_screen_active());
lv_label_set_text(rtl_label,"מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).");
lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_RTL, 0);
lv_obj_set_style_text_font(rtl_label, &lv_font_dejavu_16_persian_hebrew, 0);
lv_obj_set_width(rtl_label, 310);
lv_obj_align(rtl_label, LV_ALIGN_LEFT_MID, 5, 0);
lv_obj_t * cz_label = lv_label_create(lv_screen_active());
lv_label_set_text(cz_label,
"嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0);
lv_obj_set_width(cz_label, 310);
lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5);
.. raw:: html
</details>
.. raw:: html
<details>
<summary>MicroPython code | <a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=18bb38200a64e10ead1aa17a65c977fc18131842" target="_blank">在线模拟器</a></summary>
.. code:: python
ltr_label = lv.label(lv.screen_active())
ltr_label.set_text("In modern terminology, a microcontroller is similar to a system on a chip (SoC).")
ltr_label.set_style_text_font(lv.font_montserrat_16, 0);
ltr_label.set_width(310)
ltr_label.align(lv.ALIGN.TOP_LEFT, 5, 5)
rtl_label = lv.label(lv.screen_active())
rtl_label.set_text("מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).")
rtl_label.set_style_base_dir(lv.BASE_DIR.RTL, 0)
rtl_label.set_style_text_font(lv.font_dejavu_16_persian_hebrew, 0)
rtl_label.set_width(310)
rtl_label.align(lv.ALIGN.LEFT_MID, 5, 0)
font_simsun_16_cjk = lv.font_load("S:../../assets/font/lv_font_simsun_16_cjk.fnt")
cz_label = lv.label(lv.screen_active())
cz_label.set_style_text_font(font_simsun_16_cjk, 0)
cz_label.set_text("嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。")
cz_label.set_width(310)
cz_label.align(lv.ALIGN.BOTTOM_LEFT, 5, -5)
.. raw:: html
</details>
.. _arrow_forward-使用 lvgl 过程:
▶️ 使用 LVGL 过程
---------------
此列表将指导您逐步开始使用 LVGL。
**熟悉 LVGL**
1. 查看\ `在线演示 <https://lvgl.io/demos>`__\ ，了解 LVGL 的实际操作（3 分钟）
2. 阅读\ `文档 <https://docs.lvgl.io/master/intro/index.html>`__\ 的简介页（5 分钟）
3. 熟悉\ `快速概览 <https://docs.lvgl.io/master/get-started/quick-overview.html>`__
页面上的基本知识（15 分钟）
**开始使用 LVGL**
4. 设置\ `模拟器 <https://docs.lvgl.io/master/integration/ide/pc-simulator.html#simulator>`__ （10 分钟）
5. 尝试一些\ `示例 <https://github.com/lvgl/lvgl/tree/master/examples>`__
6. 将LVGL端口连接到线路板。请参阅\ `移植 <https://docs.lvgl.io/master/porting/index.html>`__\ 指南，或查看现成的\ `项目 <https://github.com/lvgl?q=lv_port_>`__
**成为专业人士**
7. 阅读\ `概述 <https://docs.lvgl.io/master/overview/index.html>`__\ 页面以更好地了解图书馆（2-3 小时）
8. 查看\ `控件 <https://docs.lvgl.io/master/widgets/index.html>`__\ 的文档以查看其功能和用法
**获得帮助并帮助他人**
9. 如果您有问题，请访问\ `论坛 <http://forum.lvgl.io/>`__
10. 阅读\ `贡献 <https://docs.lvgl.io/master/CONTRIBUTING.html>`__\ 指南，了解如何帮助提高 LVGL（15 分钟）
**获取更多**
11. 下载并试用 \ `SquareLine Studio <https://squareline.io/>`__.
12. 联系我们获取\ `服务 <https://lvgl.io/services>`__.
.. _handshake-服务:
🤝 服务
-------
LVGL LLC 的成立旨在为 LVGL 库提供坚实的背景，并提供多种类型的服务来帮助您进行 UI 开发。凭借在用户界面和图形行业超过15年的经验，我们可以帮助您将 UI 提升到一个新的水平。
- **平面设计**
我们的内部图形设计师是创造美丽现代设计的专家，适合您的产品和硬件资源。
- ** UI 实现**
我们还可以根据您或我们创建的设计来实现您的 UI。您可以确信，我们将充分利用您的硬件和 LVGL。如果 LVGL 中缺少某个功能或小部件，请不要担心，我们会为您实现它。
- **咨询和支持**
我们也可以通过咨询来支持您，以避免在 UI 开发过程中出现昂贵和耗时的错误。
- **板子认证**
对于提供开发板或生产套件的公司，我们会进行板子认证，展示板如何运行 LVGL。
查看我们的 \ `Demos <https://lvgl.io/demos>`__\ 作为参考。有关更多信息，请查看\ `服务页面 <https://lvgl.io/services>`__\ 。
`联系我们 <https://lvgl.io/#contact>`__\ ，告诉我们如何提供帮助。
.. _star2-贡献:
🌟 贡献
-------
LVGL 是一个开放的项目，我们非常欢迎您的贡献。有很多方法可以帮助您，从简单地谈论您的项目，到编写示例、改进文档、修复错误，甚至在 LVGL 组织下托管您自己的项目。
有关贡献的详细说明，请访问文件的\ `贡献 <https://docs.lvgl.io/master/CONTRIBUTING.html>`__\ 部分。
已经有 300 多人在 LVGL 留下了痕迹。期待你成为他们中的一员！并在下列贡献者中看到你！ 🙂
.. raw:: html
<a href="https://github.com/lvgl/lvgl/graphs/contributors">
<img src="https://contrib.rocks/image?repo=lvgl/lvgl&max=48" />
</a>
... 等等其他人.
.. |Sponsors of LVGL| image:: https://opencollective.com/lvgl/organizations.svg?width=600
:target: https://opencollective.com/lvgl
.. |Backers of LVGL| image:: https://opencollective.com/lvgl/individuals.svg?width=600
:target: https://opencollective.com/lvgl

493
docs/README_zh.rst.back
View File

@ -1,493 +0,0 @@
.. raw:: html
<p align="right">
English \| 中文 \| Português do Brasil \| 日本語
.. raw:: html
</p>
.. raw:: html
<p align="center">
.. raw:: html
</p>
.. raw:: html
<h1 align="center">
Light and Versatile Graphics Library
.. raw:: html
</h1>
.. raw:: html
<h1 align="center">
轻量级通用型图形库
.. raw:: html
</h1>
.. raw:: html
<p align="center">
官网 \| 文档 \| 论坛 \| 示例 \| 服务 \| SquareLine Studio
.. raw:: html
</p>
`中文宣传单 <./flyers/LVGL-Chinese-Flyer.pdf>`__
目录
^^^^
- `概况与总览 <#概况与总览>`__
- `特性 <#特性>`__
- `硬件要求 <#硬件要求>`__
- `已经支持的平台 <#已经支持的平台>`__
- `如何入门 <#如何入门>`__
- `例程 <#例程>`__
- `C <#c>`__
- `Micropython <#micropython>`__
- `服务 <#服务>`__
- `如何向社区贡献 <#如何向社区贡献>`__
概况与总览
----------
特性
~~~~
- 丰富且强大的模块化\ `图形组件 <https://docs.lvgl.io/master/widgets/index.html>`__\ ：按钮
(buttons)、图表 (charts)、列表 (lists)、滑动条 (sliders)、图片
(images) 等
- 高级的图形引擎：动画、抗锯齿、透明度、平滑滚动、图层混合等效果
- 支持多种\ `输入设备 <https://docs.lvgl.io/master/overview/indev.html>`__\ ：触摸屏、
键盘、编码器、按键等
- 支持\ `多显示设备 <https://docs.lvgl.io/master/overview/display.html>`__
- 不依赖特定的硬件平台，可以在任何显示屏上运行
- 配置可裁剪（最低资源占用：64 kB Flash，16 kB RAM）
- 基于UTF-8的多语种支持，例如中文、日文、韩文、阿拉伯文等
- 可以通过\ `类CSS <https://docs.lvgl.io/master/overview/style.html>`__\ 的方式来设计、布局图形界面（例如：\ `Flexbox <https://docs.lvgl.io/master/layouts/flex.html>`__\ 、\ `Grid <https://docs.lvgl.io/master/layouts/grid.html>`__\ ）
- 支持操作系统、外置内存、以及硬件加速（LVGL已内建支持STM32
DMA2D、SWM341 DMA2D、NXP PXP和VGLite）
- 即便仅有\ `单缓冲区(frame
buffer) <https://docs.lvgl.io/master/porting/display.html>`__\ 的情况下，也可保证渲染如丝般顺滑
- 全部由C编写完成，并支持C++调用
- 支持Micropython编程，参见：\ `LVGL API in
Micropython <https://blog.lvgl.io/2019-02-20/micropython-bindings>`__
- 支持\ `模拟器 <https://docs.lvgl.io/master/get-started/platforms/pc-simulator.html>`__\ 仿真，可以无硬件依托进行开发
- 丰富详实的\ `例程 <https://github.com/lvgl/lvgl/tree/master/examples>`__
- 详尽的\ `文档 <http://docs.lvgl.io/>`__\ 以及API参考手册，可线上查阅或可下载为PDF格式
硬件要求
~~~~~~~~
.. raw:: html
<table>
.. raw:: html
<tr>
.. raw:: html
<td>
要求
.. raw:: html
</td>
.. raw:: html
<td>
最低要求
.. raw:: html
</td>
.. raw:: html
<td>
建议要求
.. raw:: html
</td>
.. raw:: html
</tr>
.. raw:: html
<tr>
.. raw:: html
<td>
架构
.. raw:: html
</td>
.. raw:: html
<td colspan="2">
16、32、64位微控制器或微处理器
.. raw:: html
</td>
.. raw:: html
</tr>
.. raw:: html
<tr>
.. raw:: html
<td>
时钟
.. raw:: html
</td>
.. raw:: html
<td>
> 16 MHz
.. raw:: html
</td>
.. raw:: html
<td>
> 48 MHz
.. raw:: html
</td>
.. raw:: html
</tr>
.. raw:: html
<tr>
.. raw:: html
<td>
Flash/ROM
.. raw:: html
</td>
.. raw:: html
<td>
> 64 kB
.. raw:: html
</td>
.. raw:: html
<td>
> 180 kB
.. raw:: html
</td>
.. raw:: html
</tr>
.. raw:: html
<tr>
.. raw:: html
<td>
Static RAM
.. raw:: html
</td>
.. raw:: html
<td>
> 16 kB
.. raw:: html
</td>
.. raw:: html
<td>
> 48 kB
.. raw:: html
</td>
.. raw:: html
</tr>
.. raw:: html
<tr>
.. raw:: html
<td>
Draw buffer
.. raw:: html
</td>
.. raw:: html
<td>
> 1 × hor. res. pixels
.. raw:: html
</td>
.. raw:: html
<td>
> 1/10屏幕大小
.. raw:: html
</td>
.. raw:: html
</tr>
.. raw:: html
<tr>
.. raw:: html
<td>
编译器
.. raw:: html
</td>
.. raw:: html
<td colspan="2">
C99或更新
.. raw:: html
</td>
.. raw:: html
</tr>
.. raw:: html
</table>
*注意：资源占用情况与具体硬件平台、编译器等因素有关，上表中仅给出参考值*
已经支持的平台
~~~~~~~~~~~~~~
LVGL本身并不依赖特定的硬件平台，任何满足LVGL硬件配置要求的微控制器均可运行LVGL。
如下仅列举其中一部分:
- NXP: Kinetis, LPC, iMX, iMX RT
- STM32F1, STM32F3, STM32F4, STM32F7, STM32L4, STM32L5, STM32H7
- Microchip dsPIC33, PIC24, PIC32MX, PIC32MZ
- `Linux frame buffer <https://blog.lvgl.io/2018-01-03/linux_fb>`__
(/dev/fb)
- `Raspberry
Pi <http://www.vk3erw.com/index.php/16-software/63-raspberry-pi-official-7-touchscreen-and-littlevgl>`__
- `Espressif ESP32 <https://github.com/lvgl/lv_port_esp32>`__
- `Infineon Aurix <https://github.com/lvgl/lv_port_aurix>`__
- Nordic NRF52 Bluetooth modules
- Quectel modems
- `SYNWIT SWM341 <https://www.synwit.cn/>`__
LVGL也支持： - `Arduino
library <https://docs.lvgl.io/master/get-started/platforms/arduino.html>`__
- `PlatformIO
package <https://registry.platformio.org/libraries/lvgl/lvgl>`__ -
`Zephyr
library <https://docs.zephyrproject.org/latest/kconfig.html#CONFIG_LVGL>`__
- `ESP32
component <https://docs.lvgl.io/master/get-started/platforms/espressif.html>`__
- `NXP MCUXpresso
component <https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY>`__
- `NuttX
library <https://docs.lvgl.io/master/get-started/os/nuttx.html>`__ -
`RT-Thread
RTOS <https://www.rt-thread.org/document/site/#/rt-thread-version/rt-thread-standard/packages-manual/lvgl-docs/introduction>`__
如何入门
--------
请按照如下顺序来学习LVGL： 1.
使用\ `网页在线例程 <https://lvgl.io/demos>`__\ 来体验LVGL（3分钟） 2.
阅读文档\ `简介 <https://docs.lvgl.io/master/intro/index.html>`__\ 章节来初步了解LVGL（5分钟）
3.
再来阅读一下文档快速\ `快速概览 <https://docs.lvgl.io/master/get-started/quick-overview.html>`__\ 章节来了解LVGL的基本知识（15分钟）
4.
学习如何使用\ `模拟器 <https://docs.lvgl.io/master/get-started/platforms/pc-simulator.html>`__\ 来在电脑上仿真LVGL（10分钟）
5.
试着动手实践一些\ `例程 <https://github.com/lvgl/lvgl/tree/master/examples>`__
6.
参考\ `移植指南 <https://docs.lvgl.io/master/porting/index.html>`__\ 尝试将LVGL移植到一块开发板上，LVGL也已经提供了一些移植好的\ `工程 <https://github.com/lvgl?q=lv_port_>`__
7.
仔细阅读文档\ `总览 <https://docs.lvgl.io/master/overview/index.html>`__\ 章节来更加深入的了解和熟悉LVGL（2-3小时）
8.
浏览文档\ `组件(Widgets) <https://docs.lvgl.io/master/widgets/index.html>`__\ 章节来了解如何使用它们
9. 如果你有问题可以到LVGL\ `论坛 <http://forum.lvgl.io/>`__\ 提问 10.
阅读文档\ `如何向社区贡献 <https://docs.lvgl.io/master/CONTRIBUTING.html>`__\ 章节来看看你能帮LVGL社区做些什么，以促进LVGL软件质量的不断提高（15分钟）
例程
----
更多例程请参见
`examples <https://github.com/lvgl/lvgl/tree/master/examples>`__
文件夹。
.. figure:: https://github.com/lvgl/lvgl/raw/master/docs/misc/btn_example.png
:alt: LVGL button with label example
LVGL button with label example
C
~
.. code:: c
lv_obj_t * btn = lv_btn_create(lv_scr_act()); /*Add a button to the current screen*/
lv_obj_set_pos(btn, 10, 10); /*Set its position*/
lv_obj_set_size(btn, 100, 50); /*Set its size*/
lv_obj_add_event(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/
lv_obj_t * label = lv_label_create(btn); /*Add a label to the button*/
lv_label_set_text(label, "Button"); /*Set the labels text*/
lv_obj_center(label); /*Align the label to the center*/
...
void btn_event_cb(lv_event_t * e)
{
printf("Clicked\n");
}
Micropython
~~~~~~~~~~~
更多信息请到
`Micropython官网 <https://docs.lvgl.io/master/get-started/bindings/micropython.html>`__
查询.
.. code:: python
def btn_event_cb(e):
print("Clicked")
# Create a Button and a Label
btn = lv.btn(lv.scr_act())
btn.set_pos(10, 10)
btn.set_size(100, 50)
btn.add_event(btn_event_cb, lv.EVENT.CLICKED, None)
label = lv.label(btn)
label.set_text("Button")
label.center()
服务
----
LVGL
责任有限公司成立的目的是为了给用户使用LVGL图形库提供额外的技术支持，我们致力于提供以下服务：
- 图形设计
- UI设计
- 技术咨询以及技术支持
更多信息请参见 https://lvgl.io/services ，如果有任何问题请随时联系我们。
如何向社区贡献
--------------
LVGL是一个开源项目，非常欢迎您参与到社区贡献当中。您有很多种方式来为提高LVGL贡献您的一份力量，包括但不限于：
- 介绍你基于LVGL设计的作品或项目
- 写一些例程
- 修改以及完善文档
- 修复bug
请参见文档\ `如何向社区贡献 <https://docs.lvgl.io/master/CONTRIBUTING.html>`__\ 章节来获取更多信息。