LVGL8之自定义密码输入键盘

这一篇研究一下自定义密码输入键盘，还是通过codeblock来模拟代码的运行，代码如下：

#include <stdio.h>
#include <string.h>
#include "lvgl/lvgl.h"
#include "lv_gui_password_keyboard.h"static lv_obj_t *pwd_main_cont = NULL; // 密码输入界面的容器
static lv_obj_t *hint_label = NULL; // 密码提示框
static lv_obj_t *pwd_text_area = NULL; // 密码输入框static const char * keyboard_map[] =
{"1","2", "3","\n","4", "5", "6", "\n","7", "8", "9" ,"\n",".","0",LV_SYMBOL_BACKSPACE,""
};static const lv_btnmatrix_ctrl_t keyboard_ctrl[] =
{LV_BTNMATRIX_CTRL_NO_REPEAT, LV_BTNMATRIX_CTRL_NO_REPEAT, LV_BTNMATRIX_CTRL_NO_REPEAT,LV_BTNMATRIX_CTRL_NO_REPEAT, LV_BTNMATRIX_CTRL_NO_REPEAT, LV_BTNMATRIX_CTRL_NO_REPEAT,LV_BTNMATRIX_CTRL_NO_REPEAT, LV_BTNMATRIX_CTRL_NO_REPEAT, LV_BTNMATRIX_CTRL_NO_REPEAT,LV_BTNMATRIX_CTRL_NO_REPEAT, LV_BTNMATRIX_CTRL_NO_REPEAT, LV_BTNMATRIX_CTRL_NO_REPEAT,
};// 确认按键的事件回调
static void confirm_btn_event_callback(lv_event_t* event);// 取消按键的事件回调
static void cancel_btn_event_callback(lv_event_t* event);// 显示键盘输入界面
void lv_gui_password_keyboard_display()
{// 当前页面的画布容器pwd_main_cont = lv_obj_create(lv_scr_act()); // 基于屏幕创建了一个容器if (pwd_main_cont == NULL){printf("[%s:%d] create pwd_main_cont failed\n", __FUNCTION__, __LINE__);return;}// 画布样式static lv_style_t main_cont_style;lv_style_reset(&main_cont_style);lv_style_init(&main_cont_style); // 初始化样式lv_style_set_radius(&main_cont_style, 0); // 设置样式的圆角弧度lv_style_set_border_width(&main_cont_style, 0); // 设置边框宽度lv_style_set_bg_opa(&main_cont_style, LV_OPA_50); // 设置样式背景的透明度，不透明lv_style_set_bg_color(&main_cont_style, lv_color_make(0xea, 0xea, 0xea));lv_style_set_pad_all(&main_cont_style, 0); // 设置样式内部填充lv_obj_add_style(pwd_main_cont, &main_cont_style, 0);  // 给对象添加样式lv_obj_set_size(pwd_main_cont, LV_PCT(100), LV_PCT(100)); //设置大小800x480lv_obj_center(pwd_main_cont); // 对象居屏幕中间显示// 键盘背景容器lv_obj_t *pwd_bg_cont = lv_obj_create(pwd_main_cont);if (pwd_bg_cont == NULL){printf("[%s:%d] pwd_bg_cont create failed\n", __FUNCTION__, __LINE__);return;}// 键盘背景样式static lv_style_t bg_style;lv_style_reset(&bg_style);lv_style_init(&bg_style); // 初始化样式lv_style_set_radius(&bg_style, 10); // 设置样式的圆角弧度lv_style_set_border_width(&bg_style, 0); // 设置边框宽度lv_style_set_bg_opa(&bg_style, LV_OPA_COVER); // 设置样式背景的透明度，不透明lv_style_set_bg_color(&bg_style, lv_palette_main(LV_PALETTE_BLUE)); //背景色设置为蓝色lv_style_set_pad_all(&bg_style, 0); // 设置样式内部填充// 样式添加渐变lv_style_set_bg_grad_color(&bg_style, lv_color_white()); // 渐变背景色为白色lv_style_set_bg_grad_dir(&bg_style, LV_GRAD_DIR_VER); // 垂直方向渐变lv_style_set_bg_main_stop(&bg_style, 30); // 主停止色40lv_style_set_bg_grad_stop(&bg_style, 30); // 渐变停止色40lv_obj_add_style(pwd_bg_cont, &bg_style, 0);  // 给对象添加样式lv_obj_set_size(pwd_bg_cont, 353, 415); // 设置尺寸lv_obj_align(pwd_bg_cont, LV_ALIGN_TOP_MID, 0, 33); // 顶部居中显示// 键盘标题样式static lv_style_t title_label_style;lv_style_reset(&title_label_style);lv_style_init(&title_label_style); // 初始化样式lv_style_set_radius(&title_label_style, 0); // 设置样式的圆角弧度lv_style_set_border_width(&title_label_style, 0); //设置边框宽度lv_style_set_text_color(&title_label_style , lv_color_white());  // 字体颜色设置为白色
#if LAGN_CHNlv_style_set_text_font(&title_label_style, (const lv_font_t *)(ft_info_18.font)); //设置字体
#elselv_style_set_text_font(&title_label_style, &lv_font_montserrat_18); //设置字体
#endif// 基于键盘背景对象创建键盘标题对象lv_obj_t *title_label = lv_label_create(pwd_bg_cont);if (title_label == NULL){printf("[%s:%d] create title_label obj failed\n", __FUNCTION__, __LINE__);return;}lv_label_set_long_mode(title_label, LV_LABEL_LONG_SCROLL_CIRCULAR); // 设置长文本循环滚动模式//lv_obj_set_height(title_label, 23); // 设置对象的高度lv_obj_add_style(title_label, &title_label_style, 0); // 给btn_label添加样式lv_obj_align(title_label, LV_ALIGN_TOP_MID, 0, 10); // 顶部居中显示lv_label_set_text(title_label, "Input password"); // 设置文本内容// 基于键盘背景对象创建密码框pwd_text_area = lv_textarea_create(pwd_bg_cont);if (pwd_text_area == NULL){printf("[%s:%d] create pwd_text_area obj failed\n", __FUNCTION__, __LINE__);return;}// 密码框样式static lv_style_t pwd_text_style;lv_style_reset(&pwd_text_style);lv_style_init(&pwd_text_style); // 初始化样式lv_style_set_radius(&pwd_text_style, 0); // 设置样式的圆角弧度lv_style_set_border_width(&pwd_text_style, 1); // 设置边框宽度lv_style_set_pad_all(&pwd_text_style, 0); // 设置样式的内部填充
#if LAGN_CHNlv_style_set_text_font(&pwd_text_style, (const lv_font_t *)(ft_info_18.font)); //设置字体
#elselv_style_set_text_font(&pwd_text_style, &lv_font_montserrat_18); //设置字体
#endiflv_textarea_set_text(pwd_text_area, ""); // 文本框置空lv_textarea_set_password_mode(pwd_text_area, true); // 文本区域开启密码模式lv_textarea_set_max_length(pwd_text_area, 8); // 设置可输入的文本的最大长度lv_obj_add_style(pwd_text_area, &pwd_text_style, 0); // 给btn_label添加样式lv_obj_set_size(pwd_text_area, 295, 41); // 设置对象大小lv_obj_align_to(pwd_text_area, title_label, LV_ALIGN_OUT_BOTTOM_MID, 0, 30); // 顶部居中显示// 基于键盘背景对象创建密码校验提示标签hint_label = lv_label_create(pwd_bg_cont);if (hint_label == NULL){printf("[%s:%d] create hint_label obj failed\n", __FUNCTION__, __LINE__);return;}// 密码提示文本样式static lv_style_t hint_label_style;lv_style_reset(&hint_label_style);lv_style_init(&hint_label_style); // 初始化样式lv_style_set_radius(&hint_label_style, 0); // 设置样式的圆角弧度lv_style_set_border_width(&hint_label_style, 0); //设置边框宽度lv_style_set_text_color(&hint_label_style , lv_palette_main(LV_PALETTE_RED));  // 字体颜色设置为红色
#if LAGN_CHNlv_style_set_text_font(&hint_label_style, (const lv_font_t *)(ft_info_14.font)); //设置字体
#elselv_style_set_text_font(&hint_label_style, &lv_font_montserrat_12); //设置字体
#endiflv_label_set_long_mode(hint_label, LV_LABEL_LONG_SCROLL_CIRCULAR); // 长文本循环滚动lv_obj_add_style(hint_label, &hint_label_style, 0); // 给btn_label添加样式lv_obj_align(hint_label, LV_ALIGN_TOP_MID, 0, 110); // 顶部居中显示lv_label_set_text(hint_label, ""); // 设置文本内容// 基于键盘背景对象创建键盘对象lv_obj_t * pwd_keyboard = lv_keyboard_create(pwd_bg_cont);if (pwd_keyboard == NULL){printf("[%s:%d] create pwd_keyboard obj failed\n", __FUNCTION__, __LINE__);return;}// 键盘样式static lv_style_t pwd_kb_style;lv_style_reset(&pwd_kb_style);lv_style_init(&pwd_kb_style); // 初始化样式lv_style_set_radius(&pwd_kb_style, 5); // 设置样式的圆角弧度lv_style_set_border_width(&pwd_kb_style, 0); //设置边框宽度lv_style_set_bg_color(&pwd_kb_style, lv_color_hex(0xF98E2D));lv_style_set_text_opa(&pwd_kb_style, LV_OPA_COVER);
#if LAGN_CHNlv_style_set_text_font(&pwd_kb_style, (const lv_font_t *)(ft_info_18.font)); //设置字体
#elselv_style_set_text_font(&pwd_kb_style, &lv_font_montserrat_20); //设置字体
#endiflv_obj_set_size(pwd_keyboard, 300, 220); //设置键盘大小lv_keyboard_set_mode(pwd_keyboard, LV_KEYBOARD_MODE_NUMBER); //设置键盘模式为数字键盘lv_keyboard_set_map(pwd_keyboard, LV_KEYBOARD_MODE_NUMBER, keyboard_map, keyboard_ctrl); // 设置键盘映射lv_keyboard_set_textarea(pwd_keyboard, pwd_text_area); // 键盘对象和文本框绑定lv_obj_add_style(pwd_keyboard, &pwd_kb_style, 0); // 添加样式lv_obj_align(pwd_keyboard, LV_ALIGN_TOP_MID, 0, 130);static lv_style_t btn_style;lv_style_reset(&btn_style);lv_style_init(&btn_style); // 初始化样式lv_style_set_radius(&btn_style, 5); // 设置样式的圆角弧度lv_style_set_border_width(&btn_style, 0); //设置边框宽度lv_style_set_bg_color(&btn_style, lv_color_hex(0xF98E2D));lv_style_set_text_color(&btn_style, lv_color_hex(0xFFFFFF));
#if LAGN_CHNlv_style_set_text_font(&btn_style, (const lv_font_t *)(ft_info_18.font)); //设置字体
#elselv_style_set_text_font(&btn_style, &lv_font_montserrat_18); //设置字体
#endif// 基于键盘背景对象创建确认按键lv_obj_t * confirm_btn = lv_btn_create(pwd_bg_cont);if(pwd_bg_cont == NULL){printf("[%s:%d] pwd_bg_cont create failed\n", __FUNCTION__, __LINE__);return;}lv_obj_add_event_cb(confirm_btn, confirm_btn_event_callback, LV_EVENT_CLICKED, NULL); // 给对象添加CLICK事件和事件处理回调函数lv_obj_add_style(confirm_btn, &btn_style, 0); // 添加按键样式lv_obj_set_size(confirm_btn, 112, 37); // 设置按键对象大小lv_obj_align(confirm_btn, LV_ALIGN_TOP_MID, -65, 365); // 设置按键对象位置// 基于confirm_btn对象创建标签lv_obj_t *confirm_btn_label = lv_label_create(confirm_btn);if (confirm_btn_label == NULL){printf("[%s:%d] create confirm_btn_label obj failed\n", __FUNCTION__, __LINE__);return;}lv_label_set_text(confirm_btn_label, "OK"); // 设置文本内容lv_obj_center(confirm_btn_label); // 居中显示lv_obj_t * cancel_btn = lv_btn_create(pwd_bg_cont);if(cancel_btn == NULL){printf("[%s:%d] cancel_btn create failed\n", __FUNCTION__, __LINE__);return;}lv_obj_add_event_cb(cancel_btn, cancel_btn_event_callback, LV_EVENT_CLICKED, NULL); // 给对象添加CLICK事件和事件处理回调函数lv_obj_add_style(cancel_btn, &btn_style, 0);lv_obj_set_size(cancel_btn, 112, 37);lv_obj_align(cancel_btn, LV_ALIGN_TOP_MID, 65, 365);lv_obj_t *cancel_btn_label = lv_label_create(cancel_btn);if (cancel_btn_label == NULL){printf("[%s:%d] create cancel_btn_label obj failed\n", __FUNCTION__, __LINE__);return;}lv_label_set_text(cancel_btn_label, "Cancel"); // 设置文本内容lv_obj_center(cancel_btn_label);
}// 确认按键的事件回调
static void confirm_btn_event_callback(lv_event_t* event)
{if (event == NULL){printf("[%s:%d] event is NULL\n", __FUNCTION__, __LINE__);return ;}lv_event_code_t code = lv_event_get_code(event);if (code == LV_EVENT_CLICKED){printf("[%s:%d] confirm button clicked\n", __FUNCTION__, __LINE__);if (pwd_text_area != NULL){const char *pwd_txt = lv_textarea_get_text(pwd_text_area);if ((pwd_txt != NULL)){if (strcmp(pwd_txt, "1234") == 0){if (hint_label != NULL){lv_label_set_text(hint_label, "Password correct!");}}else if (pwd_txt[0] == '\0'){if (hint_label != NULL){lv_label_set_text(hint_label, "Password can not be empty!");}}else{if (hint_label != NULL){lv_label_set_text(hint_label, "Password error!");}}}}}
}// 取消按键的事件回调
static void cancel_btn_event_callback(lv_event_t* event)
{if (event == NULL){printf("[%s:%d] event is NULL\n", __FUNCTION__, __LINE__);return ;}lv_event_code_t code = lv_event_get_code(event);if (code == LV_EVENT_CLICKED){printf("[%s:%d] cancel button clicked\n", __FUNCTION__, __LINE__);if (pwd_text_area != NULL){lv_textarea_set_text(pwd_text_area, ""); // 文本框置空}if (hint_label != NULL){lv_label_set_text(hint_label, "");}}
}

运行效果如下：

LVGL8之自定义密码输入键盘相关推荐

uniapp自定义密码输入键盘-数字键盘效果demoUI方法一（整理）
效果图: <template><view class="paymentCodeBox"><view class ...
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13 ...
android 自定义黑点,Android自定义密码样式黑点转换成特殊字符
本文为大家分享了Android自定义密码样式的制作代码,黑点换成￥.%等特殊字符,供大家参考,具体内容如下复制下面代码即可: 布局: xmlns:android="http://schem ...
android密码是小黑点,Android自定义密码样式黑点转换成特殊字符
本文为大家分享了Android自定义密码样式的制作代码,黑点换成￥.%等特殊字符,供大家参考,具体内容如下复制下面代码即可: 布局: xmlns:android="http://schem ...
Word控件Spire.Doc 【加密解密】教程(一)：在 C#、VB.NET 中使用自定义密码加密、解密、保护 Word
Word 加密是保护 Word 文档的一种方法,它要求用户为文档提供密码.没有密码,加密文件无法打开.本指南中的解决方案演示了如何通过 Spire.Doc for .NET 在 C# 和 VB.NET ...
SpringBoot Shiro 配置自定义密码加密器
SpringBoot Shiro 配置自定义密码加密器自定义认证加密方式 /*** 自定义认证加密方式*/ public static class CustomCredentialsMatcher ...
自定义view-仿支付宝淘宝自定义密码
自定义键盘布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr ...
android自定义金额输入键盘_Android 自定义输入支付密码的软键盘实例代码
Android 自定义输入支付密码的软键盘有项目需求需要做一个密码锁功能,还有自己的软键盘,类似与支付宝那种,这里是整理的资料,大家可以看下,如有错误,欢迎留言指正需求:要实现类似支付宝的输入支付 ...
jsf 自定义属性_如何在JSF中实现自定义密码强度指示器
jsf 自定义属性使用JavaScript验证密码强度是一项常见任务. 在本文中,我将展示如何向基于JSF的Web应用程序添加密码强度指示器. 的 PrimeFaces中的密码组件已经具有密码强度的 ...

LVGL8之自定义密码输入键盘

LVGL8之自定义密码输入键盘相关推荐

最新文章

热门文章