使用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);
下一期讲文本框中键盘的使用。

本文章由威三学社出品
对课程感谢可以私信联系我们