ESP32 LVGL8.1 ——textarea 文本区域 (textarea 26)

提示:本博客作为学习笔记,有错误的地方希望指正

一、textarea 简介

1.1概述 Overview

  文本区域是一个带有标签和光标的基本对象。文本或字符可以添加到它。长行被换行,当文本变得足够长时,文本区域可以滚动。
  支持单线模式和密码模式。

1.2部分和风格 Parts and Styles

• LV_PART_MAIN文本区域的背景,它使用所有典型的背景样式属性和文本相关的样式属性,包括text_align来将文本左对齐,右对齐或居中对齐。
• LV_PART_SCROLLBAR当文本太长时显示的滚动条。
• LV_PART_SELECTED 告诉选定文本的样式。只能使用text_color和bg_color样式属性。
• LV_PART_CURSOR标记字符插入的位置。光标的区域总是当前字符的边界框。块光标可以通过向
LV_PART_CURSOR的样式中添加背景颜色和背景不透明度来创建。create line游标使游标透明,并设置左边框。anim_time样式属性设置游标闪烁时间。
• LV_PART_TEXTAREA_PLACEHOLDER 它只与文本区域相关,并允许对占位符文本进行样式化。

1.3使用 Usage

1.3.1 添加文字 Add text

  可以使用以下方法将文本或字符插入到当前光标的位置:
• lv_textarea_add_char(textarea, ‘c’)
• lv_textarea_add_text(textarea, “insert this text”)
  添加宽字符如’á’, 'ß’或CJK字符使用lv_textarea_add_text(ta, “á”)。
  lv_textarea_set_text(ta,“New text”)更改整个文本。

1.3.2 占位符 Placeholder

  可以使用lv_textarea_set_placeholder_text(ta, “占位符文本”)指定一个占位符文本——当文
本区域为空时显示该文本。

1.3.3 删除字符 Delete character

  使用lv_textarea_del_char(textarea)从当前光标位置左边删除一个字符。从右边删除使用
lv_textarea_del_char_forward(textarea)

1.3.4 移动光标 Move the cursor

  可以像lv_textarea_set_cursor_pos(textarea, 10)那样直接修改光标位置。0位置表示“在第一个字符之前”,LV_TA_CURSOR_LAST表示“在最后一个字符之后”
  你可以步进光标
• lv_textarea_cursor_right(textarea)
• lv_textarea_cursor_left(textarea)
• lv_textarea_cursor_up(textarea)
• lv_textarea_cursor_down(textarea)
  如果应用lv_textarea_set_cursor_click_pos(textarea, true),光标将跳转到单击文本区域的位置。

1.3.5 隐藏光标 Hide the cursor

  游标始终是可见的,但是最好设置为仅在LV_STATE_FOCUSED状态下可见。

1.3.6 一行模式 One line mode

  Text区域可以配置为与lv_textarea_set_one_line(textarea, true)对齐的一个区域。在这种模式下,高
度被自动设置为只显示一行,忽略换行符,并且禁用自动换行。

1.3.7 密码模式 Password mode

  文本区域支持使用lv_textarea_set_password_mode(textarea, true)启用密码模式。如果字体中存在•(Bullet, U+2022)字符,输入的字符将在一段时间后或输入新字符时转换为它。如果•不存在,则使用*。
  在密码模式下,lv_textarea_get_text(textarea)给出了真实的文本,而不是项目符号字符。可见时间可以通过lv_conf.h中的LV_TEXTAREA_DEF_PWD_SHOW_TIME进行调整。

1.3.8 接受的字符 Accepted characters

  可以使用lv_textaae_set_accepted_chars (textarea, “0123456789.±”)设置接受字符列表。其他字符将被忽略。

1.3.9 最大文字长度 Max text length

  如果在文本区域中有一个很长的文本(例如> 20k个字符),它的滚动和绘制可能会很慢。但是,通过在
lv_conf.h中启用LV_LABEL_LONG_TXT_HINT 1,可以极大地提高性能。它将保存一些关于标签的信息,以加快其绘制速度。使用LV_LABEL_LONG_TXT_HINT,滚动和绘制将与“普通”短文本一样快。

1.3.10 很长的文字 Very long texts

  如果在文本区域中有一个很长的文本(例如> 20k个字符),它的滚动和绘制可能会很慢。但是,通过在
lv_conf.h中启用LV_LABEL_LONG_TXT_HINT 1,可以极大地提高性能。它将保存一些关于标签的信息,
以加快其绘制速度。使用LV_LABEL_LONG_TXT_HINT,滚动和绘制将与“普通”短文本一样快。

1.3.10 选择文本 Select text

  如果使用lv_textarea_set_text_selection(textarea, true)启用,可以选择文本的一部分。它的工作方式就像你在你的电脑上用鼠标选择一个文本。

1.4事件 Events

• LV_EVENT_INSERT 在插入字符或文本之前发送。事件参数是计划插入的文本。
lv_textarea_set_insert_replace(textarea,“新文本”)替换要插入的文本。新文本不能在一个局部变量中,该变量在事件回调存在时被销毁。意思是不要插入任何东西。
• LV_EVENT_VALUE_CHANGED 当文本区域的内容被更改时发送。
• LV_EVENT_APPL. Y当LV_KEY_ENTER按下(或(发送)到一行文本区域时发送。

1.5按键 Keys

• LV_KEY_UP/DOWN/LEFT/RIGHT 移动光标
• Any character 将字符添加到当前光标位置

二、textarea API

lv_obj_t * lv_textarea_create(lv_obj_t * parent);							//创建一个文本区域对象
void lv_textarea_add_char(lv_obj_t * obj, uint32_t c);						//插入一个字符到当前光标位置。
void lv_textarea_add_text(lv_obj_t * obj, const char * txt);				//插入一个文本到当前光标位置
void lv_textarea_del_char(lv_obj_t * obj);									//删除当前光标位置的左字符
void lv_textarea_del_char_forward(lv_obj_t * obj);							//删除当前光标位置的右字符
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_cursor_pos(lv_obj_t * obj, int32_t pos);				//设置光标位置
void lv_textarea_set_cursor_click_pos(lv_obj_t * obj, bool en);				//通过点击文本区域上的文本来启用/禁用光标的定位。
void lv_textarea_set_password_mode(lv_obj_t * obj, bool en);				//启用/禁用密码模式
void lv_textarea_set_one_line(lv_obj_t * obj, bool en);						//设置文本区域为一行或恢复正常
void lv_textarea_set_accepted_chars(lv_obj_t * obj, const char * list);		//设置一个字符列表。只有这些字符将被文本区域接受
void lv_textarea_set_max_length(lv_obj_t * obj, uint32_t num);				//设置文本区域的最大长度
void lv_textarea_set_insert_replace(lv_obj_t * obj, const char * txt);		//在' LV_EVENT_INSERT '中,计划插入的文本可以被其他文本替换。
void lv_textarea_set_text_selection(lv_obj_t * obj, bool en);				//启用/禁用选择模式。
void lv_textarea_set_password_show_time(lv_obj_t * obj, uint16_t time);		//设置密码更改为“*”之前显示多长时间
void lv_textarea_set_align(lv_obj_t * obj, lv_text_align_t align);			//已弃用:使用普通的text_align样式属性
const char * lv_textarea_get_text(const lv_obj_t * obj);					//获取文本区域的文本。在密码模式下,它给出真正的文本(而不是'*')。
const char * lv_textarea_get_placeholder_text(lv_obj_t * obj);				//获取文本区域的占位符文本
lv_obj_t * lv_textarea_get_label(const lv_obj_t * obj);						//获取文本区域的标签
uint32_t lv_textarea_get_cursor_pos(const lv_obj_t * obj);					//获取当前光标在字符索引中的位置
bool lv_textarea_get_cursor_click_pos(lv_obj_t * obj);						//获取是否启用光标点击定位。
bool lv_textarea_get_password_mode(const lv_obj_t * obj);					//获取密码模式属性
bool lv_textarea_get_one_line(const lv_obj_t * obj);						//获取一行配置属性
const char * lv_textarea_get_accepted_chars(lv_obj_t * obj);				//获取一个可接受字符列表。
uint32_t lv_textarea_get_max_length(lv_obj_t * obj);						//获取文本区域的最大长度。
bool lv_textarea_text_is_selected(const lv_obj_t * obj);					//查找文本是否被选中。
bool lv_textarea_get_text_selection(lv_obj_t * obj);						//查看是否启用了选择模式。
uint16_t lv_textarea_get_password_show_time(lv_obj_t * obj);				//设置密码更改为“*”之前显示多长时间
void lv_textarea_clear_selection(lv_obj_t * obj);							//清除文本区域上的选择。
void lv_textarea_cursor_right(lv_obj_t * obj);								//将光标向右移动一个字符
void lv_textarea_cursor_left(lv_obj_t * obj);								//将光标向左移动一个字符
void lv_textarea_cursor_down(lv_obj_t * obj);								//将光标向下移动一行
void lv_textarea_cursor_up(lv_obj_t * obj);									//将光标向上移动一行

三、示例

3.1示例实现数字按键输入

static void textarea_Show1_event_cb(lv_event_t * e)
{
   lv_obj_t * ta = lv_event_get_target(e);
   LV_LOG_USER("Enter was pressed. The current text is: %s", lv_textarea_get_text(ta));
}
/*************************************************
 *  函数名称 :  textarea_Show1_btnm_event_cb
 *  参    数 : lv_event_t * e
 *  函数功能 : 输入回调函数
 *************************************************/
static void textarea_Show1_btnm_event_cb(lv_event_t * e)
{
   lv_obj_t * obj = lv_event_get_target(e);
   lv_obj_t * ta = lv_event_get_user_data(e);
   const char * txt = lv_btnmatrix_get_btn_text(obj,lv_btnmatrix_get_selected_btn(obj));
   if(strcmp(txt,LV_SYMBOL_BACKSPACE) == 0)
      lv_textarea_del_char(ta);
   else if(strcmp(txt,LV_SYMBOL_NEW_LINE) == 0)
      lv_event_send(ta,LV_EVENT_READY,NULL);
   else lv_textarea_add_text(ta,txt);
}
/*************************************************
 *  函数名称 :  textarea_show1
 *  参    数 : 无
 *  函数功能 : 输入显示
 *************************************************/
void textarea_show1()
{
   lv_obj_t * ta = lv_textarea_create(lv_scr_act());  //创建输入框
   lv_textarea_set_one_line(ta,true);                 //设置输入只显示一行
   lv_obj_align(ta,LV_ALIGN_TOP_MID,0,10);            //设置位置
   lv_obj_add_event_cb(ta,textarea_Show1_event_cb,LV_EVENT_READY,ta);//设置回调函数
   lv_obj_set_size(ta,200,35);                        //设置尺寸
   lv_obj_add_state(ta,LV_STATE_FOCUSED);             //添加状态

   static const char * btnm_map[]={ "1","2","3","\n",
                                    "4","5","6","\n",
                                    "7","8","9","\n",
                                    LV_SYMBOL_BACKSPACE,"0",LV_SYMBOL_NEW_LINE,""};
   lv_obj_t * btnm = lv_btnmatrix_create(lv_scr_act());  //创建矩阵按键
   lv_obj_set_size(btnm,200,150);                        //设置尺寸
   lv_obj_align(btnm,LV_ALIGN_BOTTOM_MID,0,-10);         //设置位置
   lv_obj_add_event_cb(btnm,textarea_Show1_btnm_event_cb,LV_EVENT_VALUE_CHANGED,ta);   //设置回调
   lv_obj_clear_flag(btnm,LV_OBJ_FLAG_CLICK_FOCUSABLE);  //设置标志位
   lv_btnmatrix_set_map(btnm,btnm_map);                  //设置矩阵按键
}

在这里插入图片描述

3.2示例实现键盘输入密码模式和普通模式

static lv_obj_t * kb;
static void textarea_Show2_event_cb(lv_event_t * e)
{
   lv_event_code_t code = lv_event_get_code(e);          //创建输入事件对象
   lv_obj_t * ta = lv_event_get_target(e);               //获取事件对象
   if(code == LV_EVENT_CLICKED || code == LV_EVENT_FOCUSED){   //获取事件
      if(kb != NULL){
         lv_keyboard_set_textarea(kb,ta);                //为键盘指定一个文本区域。按下的字符会放在那里。
      }else if(code == LV_EVENT_READY){                  //进程结束
         LV_LOG_USER("Ready current text: %s",lv_textarea_get_text(ta));//打印显示
      }
   }
}
/*************************************************
 *  函数名称 :  textarea_show2
 *  参    数 : 无
 *  函数功能 : 输入显示
 *************************************************/
void textarea_show2()
{
   lv_obj_t * pwd_ta = lv_textarea_create(lv_scr_act());       //创建输入对话框
   lv_textarea_set_text(pwd_ta,"");                            //设置文本区域的文本
   lv_textarea_set_password_mode(pwd_ta,true);                 //密码输入模式
   lv_textarea_set_one_line(pwd_ta,true);                      //一行输入模式
   lv_obj_set_width(pwd_ta,lv_pct(40));                        //设置宽度
   lv_obj_set_pos(pwd_ta,5,20);                                //设置位置
   lv_obj_add_event_cb(pwd_ta,textarea_Show2_event_cb,LV_EVENT_ALL,NULL);//创建回调函数

   lv_obj_t * pwd_label = lv_label_create(lv_scr_act());       //创建label对象
   lv_label_set_text(pwd_label,"Password");                    //密码输入模式
   lv_obj_align_to(pwd_label,pwd_ta,LV_ALIGN_OUT_TOP_LEFT,0,0);//设置位置

   lv_obj_t * text_ta = lv_textarea_create(lv_scr_act());      //创建输入对话框
   lv_textarea_set_one_line(text_ta,true);                     //创建输入对话框
   lv_textarea_set_password_mode(text_ta,false);               //非密码输入模式
   lv_obj_set_width(text_ta,lv_pct(40));                       //设置尺寸
   lv_obj_add_event_cb(text_ta,textarea_Show2_event_cb,LV_EVENT_ALL,NULL);//创建回调
   lv_obj_align(text_ta,LV_ALIGN_TOP_RIGHT,-5,20);             //设置位置

   lv_obj_t * oneline_label = lv_label_create(lv_scr_act());   //创建label
   lv_label_set_text(oneline_label,"Text:");                   //设置label内容
   lv_obj_align_to(oneline_label,text_ta,LV_ALIGN_OUT_TOP_LEFT,0,0);//设置位置

   kb = lv_keyboard_create(lv_scr_act());                      //创建键盘输入
   lv_obj_set_size(kb,LV_HOR_RES,LV_VER_RES/2);                //设置键盘尺寸
   lv_keyboard_set_textarea(kb,pwd_ta);                        //为键盘指定一个文本区域。按下的字符会放在那里。
}

在这里插入图片描述

3.3示例实现固定数字接收输入在第三个位置强制插入一个字符

/*************************************************
 *  函数名称 :  textarea_show3_event_cb
 *  参    数 : lv_event_t * e
 *  函数功能 : 实现回调显示
 *************************************************/
static void textarea_show3_event_cb(lv_event_t * e)
{
   lv_obj_t * ta = lv_event_get_target(e);
   const char * txt = lv_textarea_get_text(ta);
   if(txt[0] >= '0' && txt[0] <= '9' && txt[1] >= '0' && txt[1] <= '9' && txt[2] != ';'){
      lv_textarea_set_cursor_pos(ta,2);
      lv_textarea_add_char(ta,':');
   }
}
/*************************************************
 *  函数名称 :  textarea_show3
 *  参    数 : 无
 *  函数功能 : 输入显示
 *************************************************/
void textarea_show3()
{
   lv_obj_t * ta = lv_textarea_create(lv_scr_act());     //创建输入框
   lv_obj_add_event_cb(ta,textarea_show3_event_cb,LV_EVENT_VALUE_CHANGED,NULL);  //创建回调
   lv_textarea_set_accepted_chars(ta,"0123456789:");     //只接收字体
   lv_textarea_set_max_length(ta,5);                     //设置长度
   lv_textarea_set_one_line(ta,true);                    //一行显示模式
   lv_textarea_set_text(ta,"");                          //设置初始字体
   lv_obj_set_size(ta,200,39);                           //设置尺寸
   lv_obj_align(ta,LV_ALIGN_TOP_MID,0,10);               //设置位置

   kb = lv_keyboard_create(lv_scr_act());                //创建键盘
   lv_obj_set_size(kb,LV_HOR_RES,LV_VER_RES/2);          //设置尺寸
   lv_keyboard_set_mode(kb,LV_KEYBOARD_MODE_NUMBER);     //设置模式
   lv_keyboard_set_textarea(kb,ta);                      //为键盘指定一个文本区域。按下的字符会放在那里。
}

在这里插入图片描述

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值