使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第六讲)

这一期来讲文本框控件的基本使用以及注意事项，首先文本区域是由一个Label与光标组合而成，用于文本输入。关于该控件的使用Gui_guider软件提供限制长度、允许字符、密码模式以及不换行功能的使用。

首先我们按照直接讲的方法创建一个空白的工程，在屏幕上放置俩个文本框以及两个控件充当账户和密码的输入框，以及一个按键作为登录按键，具体如下图所示：

然后讲控件赋予名字修改控件大小以及位置，将label控件显示字体为宋体16号字靠左对齐，文本框删除多余字体，大小设置为长195宽33，按键修改名称为“登录”，具体如下图所示：

点击其中一个文本框观察GUi_guider软件提供的控件属性：

***行文本指的是在文本框中显示的文本，由用户进行输入。

第二行Placeholder指文本框在用户未输入时显示的内容，我们将该栏输入“123456”，具体如下图所示：

当在输入框输入v3时，“123456”消失不见：

第三行***长度指的是文本框输入***长为多少，当超过这个长度用户输入的内容将不在文本框内显示。

第四行允许输入字符，意思是可以添加限制，使用户只能输入什么，才能在文本框显示。例如在该行输入0123456789那么这个文本框只会显示这几个字符，其余不显示，具体效果如图所示：

第五行指开启还是取消密码模式，密码模式指当用户在文本框输入字符时，文本框内显示“****”，具体如下图所示：

第六行指的是是否开启换行模式，新建文本框默认是开启换行模式，当文本框内容超出一行显示时，将在文本框的下方与右方出现滚动条。具体如下图所示：

***是一些基本的样式与边框颜色设置，具体如下所示：

这里我们选择12号宋体，边框为黑色，字间距为2，内边距分别为距离顶部4，右侧4，左侧4，***是关于阴影的设置保持不变即可。

由于俩个文本框的代码相差不多，这里只说一下账号文本框的代码，代码具体如下：

//Write codes screen_2_v3_z

//创建文本区域

ui->screen_2_v3_z = lv_textarea_create(ui->screen_2);

//设置初始文本内容

lv_textarea_set_text(ui->screen_2_v3_z, '');

//设置占位符文本

lv_textarea_set_placeholder_text(ui->screen_2_v3_z, '');

//设置密码模式的字符显示

lv_textarea_set_password_bullet(ui->screen_2_v3_z, '*');

//设置密码输入模式

lv_textarea_set_password_mode(ui->screen_2_v3_z, false);

//设置单行文本输入

lv_textarea_set_one_line(ui->screen_2_v3_z, true);

//设置接收字符

lv_textarea_set_accepted_chars(ui->screen_2_v3_z, '');

//设置***输入长度

lv_textarea_set_max_length(ui->screen_2_v3_z, 16);

//设置文本框的位置以及大小

    lv_obj_set_pos(ui->screen_2_v3_z, 170, 122);

    lv_obj_set_size(ui->screen_2_v3_z, 195, 33);

//Write style for screen_2_v3_z, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.

//设置文本颜色

lv_obj_set_style_text_color(ui->screen_2_v3_z, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本字体为宋体12号

lv_obj_set_style_text_font(ui->screen_2_v3_z, &lv_font_SourceHanSerifSC_Regular_12, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本透明度

lv_obj_set_style_text_opa(ui->screen_2_v3_z, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置字母间距

lv_obj_set_style_text_letter_space(ui->screen_2_v3_z, 2, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本对齐方式

lv_obj_set_style_text_align(ui->screen_2_v3_z, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置背景透明度以及颜色

lv_obj_set_style_bg_opa(ui->screen_2_v3_z, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框样式

    lv_obj_set_style_bg_color(ui->screen_2_v3_z, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);

    lv_obj_set_style_bg_grad_dir(ui->screen_2_v3_z, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

    lv_obj_set_style_border_width(ui->screen_2_v3_z, 2, LV_PART_MAIN|LV_STATE_DEFAULT);

    lv_obj_set_style_border_opa(ui->screen_2_v3_z, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

    lv_obj_set_style_border_color(ui->screen_2_v3_z, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_border_side(ui->screen_2_v3_z, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置阴影与内边距

    lv_obj_set_style_shadow_width(ui->screen_2_v3_z, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

    lv_obj_set_style_pad_top(ui->screen_2_v3_z, 4, LV_PART_MAIN|LV_STATE_DEFAULT);

    lv_obj_set_style_pad_right(ui->screen_2_v3_z, 4, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_left(ui->screen_2_v3_z, 4, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置圆角半径

    lv_obj_set_style_radius(ui->screen_2_v3_z, 4, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style for screen_2_v3_z, Part: LV_PART_SCROLLBAR, State: LV_STATE_DEFAULT.

//设置滚动条的背景透明度以及颜色

    lv_obj_set_style_bg_opa(ui->screen_2_v3_z, 255, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);

    lv_obj_set_style_bg_color(ui->screen_2_v3_z, lv_color_hex(0xffffff), LV_PART_SCROLLBAR|LV_STATE_DEFAULT);

lv_obj_set_style_bg_grad_dir(ui->screen_2_v3_z, LV_GRAD_DIR_NONE, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);

//设置滚动条的圆角半径

    lv_obj_set_style_radius(ui->screen_2_v3_z, 0, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);

下一期讲文本框中键盘的使用。

本文章由威三学院出品

对课程感兴趣可以联系我们