不用样式来写一个好看一点的lvgl登录页面
时间: 2023-08-23 07:03:40 浏览: 91
好的,我可以给您提供一个简单的示例代码,实现一个基本的lvgl登录页面,不需要使用样式:
```c
#include <lvgl/lvgl.h>
void create_login_page(lv_obj_t *parent)
{
lv_coord_t width = lv_obj_get_width(parent);
lv_coord_t height = lv_obj_get_height(parent);
// 创建一个背景
lv_obj_t *bg = lv_obj_create(parent, NULL);
lv_obj_set_size(bg, width, height);
lv_obj_set_style_bg_color(bg, LV_STATE_DEFAULT, LV_COLOR_WHITE);
// 创建一个标题
lv_obj_t *title = lv_label_create(parent, NULL);
lv_label_set_text(title, "Welcome to my app");
lv_label_set_style_text_font(title, LV_STATE_DEFAULT, &lv_font_montserrat_24);
// 设置标题位置
lv_obj_set_width(title, width - 40);
lv_obj_align(title, bg, LV_ALIGN_TOP_MID, 0, 40);
// 创建一个用户名输入框
lv_obj_t *username_label = lv_label_create(bg, NULL);
lv_label_set_text(username_label, "Username:");
lv_label_set_style_text_font(username_label, LV_STATE_DEFAULT, &lv_font_montserrat_16);
lv_obj_set_width(username_label, width - 40);
lv_obj_align(username_label, title, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 30);
lv_obj_t *username_input = lv_textarea_create(bg, NULL);
lv_obj_set_width(username_input, width - 40);
lv_obj_align(username_input, username_label, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 10);
// 创建一个密码输入框
lv_obj_t *password_label = lv_label_create(bg, NULL);
lv_label_set_text(password_label, "Password:");
lv_label_set_style_text_font(password_label, LV_STATE_DEFAULT, &lv_font_montserrat_16);
lv_obj_set_width(password_label, width - 40);
lv_obj_align(password_label, username_input, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 30);
lv_obj_t *password_input = lv_textarea_create(bg, NULL);
lv_obj_set_width(password_input, width - 40);
lv_obj_align(password_input, password_label, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 10);
// 创建一个登录按钮
lv_obj_t *login_btn = lv_btn_create(bg, NULL);
lv_obj_set_width(login_btn, width - 40);
lv_obj_align(login_btn, password_input, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 30);
lv_obj_t *login_label = lv_label_create(login_btn, NULL);
lv_label_set_text(login_label, "Login");
lv_label_set_style_text_font(login_label, LV_STATE_DEFAULT, &lv_font_montserrat_16);
lv_obj_set_event_cb(login_btn, login_btn_click_cb);
}
void login_btn_click_cb(lv_obj_t *btn, lv_event_t event)
{
if (event == LV_EVENT_CLICKED) {
// 处理登录逻辑
}
}
```
这是一个简单的登录页面,包含一个标题、用户名输入框、密码输入框和一个登录按钮。您可以根据需要调整各个组件的位置和大小。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)