基础控件与布局
学习更多的基础控件与布局，移植好字体后的版本在gitee仓库更新
一、输入框（Textarea）
常用接口函数原型
1. 创建和基本设置
lv_obj_t * lv_textarea_create(lv_obj_t * parent); // 创建文本区域对象
void lv_textarea_set_text(lv_obj_t * obj, const char * txt); // 设置文本内容
void lv_textarea_set_placeholder_text(lv_obj_t * obj, const char * txt); // 设置占位符文本
void lv_textarea_set_one_line(lv_obj_t * obj, bool en); // 设置单行模式
void lv_textarea_set_password_mode(lv_obj_t * obj, bool en); // 设置密码模式
void lv_textarea_set_password_bullet(lv_obj_t * obj, const char * bullet); // 设置密码显示字符
2. 文本内容操作
void lv_textarea_add_text(lv_obj_t * obj, const char * txt); // 追加文本
void lv_textarea_add_char(lv_obj_t * obj, uint32_t c); // 追加单个字符
void lv_textarea_del_char(lv_obj_t * obj); // 删除光标前字符
void lv_textarea_del_char_forward(lv_obj_t * obj); // 删除光标后字符
void lv_textarea_clear_selection(lv_obj_t * obj); // 清除文本选择
const char * lv_textarea_get_text(const lv_obj_t * obj); // 获取文本内容
const char * lv_textarea_get_placeholder_text(lv_obj_t * obj); // 获取占位符文本
3. 光标操作
void lv_textarea_set_cursor_pos(lv_obj_t * obj, int32_t pos); // 设置光标位置
void lv_textarea_cursor_right(lv_obj_t * obj); // 光标右移
void lv_textarea_cursor_left(lv_obj_t * obj); // 光标左移
void lv_textarea_cursor_up(lv_obj_t * obj); // 光标上移
void lv_textarea_cursor_down(lv_obj_t * obj); // 光标下移
uint16_t lv_textarea_get_cursor_pos(const lv_obj_t * obj); // 获取光标位置
void lv_textarea_set_cursor_click_pos(lv_obj_t * obj, bool en); // 启用点击设置光标
4. 文本选择和编辑
void lv_textarea_set_text_selection(lv_obj_t * obj, bool en); // 启用文本选择
void lv_textarea_select_all(lv_obj_t * obj); // 选择所有文本
void lv_textarea_cut(lv_obj_t * obj); // 剪切选中文本
void lv_textarea_copy(lv_obj_t * obj); // 复制选中文本
void lv_textarea_paste(lv_obj_t * obj); // 粘贴文本
bool lv_textarea_get_text_selection(lv_obj_t * obj); // 获取文本选择状态
5. 输入限制和验证
void lv_textarea_set_max_length(lv_obj_t * obj, uint32_t num); // 设置最大字符数
void lv_textarea_set_accepted_chars(lv_obj_t * obj, const char * list); // 设置可接受字符
void lv_textarea_set_insert_replace(lv_obj_t * obj, const char * txt); // 设置插入替换文本
uint32_t lv_textarea_get_max_length(lv_obj_t * obj); // 获取最大字符数
const char * lv_textarea_get_accepted_chars(lv_obj_t * obj); // 获取可接受字符
6. 滚动和布局
void lv_textarea_set_scrollbar_mode(lv_obj_t * obj, lv_scrollbar_mode_t mode); // 设置滚动条模式
void lv_textarea_set_scroll_propagation(lv_obj_t * obj, bool en); // 设置滚动传播
void lv_textarea_set_edge_flash(lv_obj_t * obj, bool en); // 设置边缘闪光效果
7. 状态和样式
void lv_textarea_set_align(lv_obj_t * obj, lv_text_align_t align); // 设置文本对齐方式
bool lv_textarea_get_one_line(const lv_obj_t * obj); // 获取是否单行模式
bool lv_textarea_get_password_mode(const lv_obj_t * obj); // 获取密码模式状态
8. 键盘关联
void lv_textarea_set_textarea(lv_obj_t * kb, lv_obj_t * obj); // 关联键盘和文本区域
lv_obj_t * lv_textarea_get_label(const lv_obj_t * obj); // 获取内部标签对象
9. 高级功能
void lv_textarea_set_undo(lv_obj_t * obj, bool en); // 启用撤销功能
void lv_keyboard_set_textarea(lv_obj_t * kb, lv_obj_t * ta); // 设置键盘关联的文本区域
二、键盘
常用接口函数原型
1. 创建和基本设置
lv_obj_t * lv_keyboard_create(lv_obj_t * parent); // 创建键盘对象
void lv_keyboard_set_mode(lv_obj_t * kb, lv_keyboard_mode_t mode); // 设置键盘模式
void lv_keyboard_set_popovers(lv_obj_t * kb, bool en); // 设置弹出模式
void lv_keyboard_set_map(lv_obj_t * kb, lv_keyboard_mode_t mode,
const char * map[], const lv_btnmatrix_ctrl_t ctrl_map[]); // 设置键盘映射
2. 文本区域关联
void lv_keyboard_set_textarea(lv_obj_t * kb, lv_obj_t * ta); // 关联键盘和文本区域
lv_obj_t * lv_keyboard_get_textarea(const lv_obj_t * kb); // 获取关联的文本区域
3. 模式和状态控制
void lv_keyboard_set_mode(lv_obj_t * kb, lv_keyboard_mode_t mode); // 设置键盘模式（文本/数字等）
lv_keyboard_mode_t lv_keyboard_get_mode(const lv_obj_t * kb); // 获取当前键盘模式
4. 样式和外观
void lv_keyboard_set_style(lv_obj_t * kb,
lv_keyboard_style_t type, lv_style_t * style); // 设置键盘样式
5. 事件回调
// 通常通过事件系统处理键盘输入
void lv_keyboard_def_event_cb(lv_event_t * e); // 默认键盘事件回调
6. 键盘模式枚举
typedef enum {
LV_KEYBOARD_MODE_TEXT_LOWER, // 文本模式小写
LV_KEYBOARD_MODE_TEXT_UPPER, // 文本模式大写
LV_KEYBOARD_MODE_SPECIAL, // 特殊字符模式
LV_KEYBOARD_MODE_NUMBER, // 数字模式
LV_KEYBOARD_MODE_USER_1, // 用户自定义模式1
LV_KEYBOARD_MODE_USER_2, // 用户自定义模式2
LV_KEYBOARD_MODE_USER_3, // 用户自定义模式3
LV_KEYBOARD_MODE_USER_4, // 用户自定义模式4
} lv_keyboard_mode_t;
7. 键盘样式类型
typedef enum {
LV_KEYBOARD_STYLE_BG, // 背景样式
LV_KEYBOARD_STYLE_BTN, // 按钮样式
LV_KEYBOARD_STYLE_BTN_REL, // 按钮释放状态样式
LV_KEYBOARD_STYLE_BTN_PR, // 按钮按下状态样式
LV_KEYBOARD_STYLE_BTN_TGL_REL, // 按钮切换释放状态样式
LV_KEYBOARD_STYLE_BTN_TGL_PR, // 按钮切换按下状态样式
LV_KEYBOARD_STYLE_BTN_INA, // 按钮禁用状态样式
} lv_keyboard_style_t;
三、登录窗口示例
#include "../lvgl/examples/lv_examples.h"
#include <stdio.h>
#include <stdlib.h>
#include "list.h"
#include <string.h>
static lv_style_t * FontStyleInit()
{
/*Create a font*/
static lv_ft_info_t info;
/*FreeType uses C standard file system, so no driver letter is required.*/
info.name = "/usr/share/fonts/simkai.ttf";
info.weight = 28;
info.style = FT_FONT_STYLE_NORMAL;
info.mem = NULL;
if(!lv_ft_font_init(&info)) {
LV_LOG_ERROR("create failed.");
}
/*Create style with the new font*/
static lv_style_t style;
lv_style_init(&style);
lv_style_set_text_font(&style, info.font);
lv_style_set_text_align(&style, LV_TEXT_ALIGN_CENTER);
return &style ;
}
void showKeyBox ( lv_event_t * e )
{
// 获得触发本事件响应函数的事件编码
lv_event_code_t code = lv_event_get_code(e);
// 得到用户数据（键盘指针）
lv_obj_t * kb = lv_event_get_user_data(e);
lv_obj_t * ta = lv_event_get_target(e);
if (code == LV_EVENT_DEFOCUSED)
{
/* 失去聚焦 */
lv_obj_add_flag(kb ,LV_OBJ_FLAG_HIDDEN );
}
else if (code == LV_EVENT_FOCUSED)
{
/* 得到聚焦 */
// 显示键盘
lv_obj_clear_flag(kb , LV_OBJ_FLAG_HIDDEN );
// 设置键盘的输入目标
lv_keyboard_set_textarea(kb , ta) ;
}
}
static void UIInit()
{
lv_obj_t * IDArea = lv_textarea_create( lv_scr_act() );
lv_obj_align(IDArea , LV_ALIGN_TOP_MID, 0, 100);
lv_obj_set_size(IDArea , 300 , 50 );
lv_textarea_set_placeholder_text(IDArea, "user id ....");
lv_obj_t * PassedArea = lv_textarea_create( lv_scr_act() );
lv_obj_align(PassedArea , LV_ALIGN_TOP_MID, 0, 200);
lv_obj_set_size(PassedArea , 300 , 50 );
lv_textarea_set_placeholder_text(PassedArea, "user passwd ....");
lv_style_t * fontStyle = FontStyleInit() ;
lv_obj_t * BtnLonIn = lv_btn_create( lv_scr_act() );
lv_obj_align(BtnLonIn , LV_ALIGN_TOP_MID, -100, 300);
lv_obj_set_size(BtnLonIn , 100 , 70 );
lv_obj_t * label = lv_label_create( BtnLonIn );
lv_obj_add_style(label , fontStyle , 0 );
lv_label_set_text( label , "登录" );
lv_obj_t * BtnSinIn = lv_btn_create( lv_scr_act() );
lv_obj_align(BtnSinIn , LV_ALIGN_TOP_MID, 100, 300);
lv_obj_set_size(BtnSinIn , 100 , 70 );
label = lv_label_create( BtnSinIn );
lv_obj_add_style(label , fontStyle , 0 );
lv_label_set_text( label , "注册" );
// 创建键盘
lv_obj_t * kb = lv_keyboard_create(lv_scr_act());
lv_obj_add_flag( kb , LV_OBJ_FLAG_HIDDEN ); // 隐藏键盘
// 给输入框添加回调函数，实现键盘的显示与隐藏
lv_obj_add_event_cb( IDArea , showKeyBox , LV_EVENT_ALL , kb);
lv_obj_add_event_cb( PassedArea , showKeyBox , LV_EVENT_ALL , kb);
}
void keyTest()
{
UIInit();
}
四、多界面编程
界面切换的大致思路：
- 设计好多个界面（可以运行时初始化，也可以加载前初始化）
- 选中其中一个作为运行时第一个界面
- 根据实际运行情况加载指定的界面
常用界面相关接口：
lv_obj_t * lv_scr_act(void); // 获取当前活动屏幕
lv_obj_t * lv_scr_act(void); // 获取当前活动屏幕（同义词）
void lv_scr_load(lv_obj_t * scr); // 加载屏幕（无动画）
void lv_scr_load_anim(lv_obj_t * scr,
lv_scr_load_anim_t anim_type, uint32_t time,
uint32_t delay, bool auto_del); // 加载屏幕（带动画）
lv_obj_t * lv_screen_create(void); // 创建新屏幕
// 如果使用场景管理器
lv_obj_t * lv_scene_create(lv_obj_t * parent); // 创建场景
void lv_scene_load(lv_obj_t * scene); // 加载场景
void lv_scene_del(lv_obj_t * scene); // 删除场景
关于加载动画效果选项：
typedef enum {
LV_SCR_LOAD_ANIM_NONE, // 无动画
LV_SCR_LOAD_ANIM_OVER_LEFT, // 从右侧滑入覆盖左侧
LV_SCR_LOAD_ANIM_OVER_RIGHT, // 从左侧滑入覆盖右侧
LV_SCR_LOAD_ANIM_OVER_TOP, // 从底部滑入覆盖顶部
LV_SCR_LOAD_ANIM_OVER_BOTTOM, // 从顶部滑入覆盖底部
LV_SCR_LOAD_ANIM_MOVE_LEFT, // 向左移动出屏幕
LV_SCR_LOAD_ANIM_MOVE_RIGHT, // 向右移动出屏幕
LV_SCR_LOAD_ANIM_MOVE_TOP, // 向上移动出屏幕
LV_SCR_LOAD_ANIM_MOVE_BOTTOM, // 向下移动出屏幕
LV_SCR_LOAD_ANIM_FADE_IN, // 淡入
LV_SCR_LOAD_ANIM_FADE_OUT, // 淡出
LV_SCR_LOAD_ANIM_FADE_ON, // 淡入（同FADE_IN）
} lv_scr_load_anim_t;
四、弹性布局
Flexbox（弹性布局）（或简称 Flex）是 CSSGrid的一个子集。它可以将项目排列成行或列（轨道(tracks)），调整项目和轨道之间的间距、调整对齐方式、起始位置等。
一般设置步骤是：
- 将要布局的控件放入一个对象中；
- 设定对象的布局方式;
关键点在于使用 lv_obj_set_flex_flow 给某一个对象设置布局的方案：
void lv_obj_set_flex_flow(lv_obj_t * obj, lv_flex_flow_t flow)
obj 需要布局的对象
flow 布局的流向设置
布局的流向：
typedef enum {
LV_FLEX_FLOW_ROW = 0x00, // 行排列（从左到右）
LV_FLEX_FLOW_COLUMN = _LV_FLEX_COLUMN, // 列排列（从上到下）
LV_FLEX_FLOW_ROW_WRAP = LV_FLEX_FLOW_ROW | _LV_FLEX_WRAP, // 行排列自动换行
LV_FLEX_FLOW_ROW_REVERSE = LV_FLEX_FLOW_ROW | _LV_FLEX_REVERSE, // 行排列反向（从右到左）
LV_FLEX_FLOW_ROW_WRAP_REVERSE = LV_FLEX_FLOW_ROW | _LV_FLEX_WRAP | _LV_FLEX_REVERSE, // 行排列反向自动换行
LV_FLEX_FLOW_COLUMN_WRAP = LV_FLEX_FLOW_COLUMN | _LV_FLEX_WRAP, // 列排列自动换行
LV_FLEX_FLOW_COLUMN_REVERSE = LV_FLEX_FLOW_COLUMN | _LV_FLEX_REVERSE, // 列排列反向（从下到上）
LV_FLEX_FLOW_COLUMN_WRAP_REVERSE = LV_FLEX_FLOW_COLUMN | _LV_FLEX_WRAP | _LV_FLEX_REVERSE, // 列排列反向自动换行
} lv_flex_flow_t;
五、网格布局
Grid（网格布局）是CSSGrid的一个子集。它可以将项目排列成具有行或列（轨道）的二维 “表格” 中。该项目可以跨越多个列或行。轨道的大小可以设置为像素、最大项目LV_GRID_CONTENT或 “空闲单元” （FR） 以按比例分配自由空间。
示例：
示例（在指定坐标加载一个按钮）：
void test_grid(void)
{
static lv_coord_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};
static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_scr_act());
lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_layout(cont, LV_LAYOUT_GRID);
lv_obj_t * label;
lv_obj_t * obj;
uint32_t i;
obj = lv_btn_create(cont);
/*Stretch the cell horizontally and vertically too
*Set span to 1 to make the cell 1 column/row sized
设置obj在父类部件中的横列位置坐标，父类必须是栅格化布局*/
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 2, 1,
LV_GRID_ALIGN_STRETCH, 1, 1);
}
浙公网安备 33010602011771号