设置页面设计

## 效果图 ![Snipaste_20220413_145643.png](https://cos.easydoc.net/78425667/files/l1x87h0q.png) ## 容器分区设计 ###### 从上图可看出,主要利用一个容器加两个区域即可 ## 代码解析 ### 显示区域 ```lua local makeSettingCnt=function(cont) SettingCnt=lvgl.cont_create(cont, nil) lvgl.obj_set_size(SettingCnt,854, 370) lvgl.obj_align(SettingCnt, nil, lvgl.ALIGN_IN_BOTTOM_MID, 0, 0) lvgl.obj_add_style(SettingCnt, lvgl.CONT_PART_MAIN, style.style_div) local cc=lvgl.cont_create(SettingCnt, nil) lvgl.obj_set_size(cc,854, 90) lvgl.obj_add_style(cc, lvgl.CONT_PART_MAIN, style.style_div) -- 创建图片控件 local img = lvgl.img_create(cc, nil) -- 设置图片显示的图像 lvgl.img_set_src(img, "/lua/t2.png") -- 图片居中 lvgl.obj_align(img, nil, lvgl.ALIGN_IN_TOP_LEFT, 20, 0) local label=lvgl.label_create(img, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 告警等级") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_LEFT_MID, 8, 0) local cb = lvgl.checkbox_create(cc, nil) lvgl.checkbox_set_text(cb, "紧急") lvgl.obj_align(cb, img, lvgl.ALIGN_OUT_BOTTOM_LEFT,5, 12) lvgl.obj_add_style(cb, lvgl.CHECKBOX_PART_BG, style.style_leve) local cb = lvgl.checkbox_create(cc, nil) lvgl.checkbox_set_text(cb, "严重") lvgl.obj_align(cb, img, lvgl.ALIGN_OUT_BOTTOM_LEFT,95+10, 12) lvgl.obj_add_style(cb, lvgl.CHECKBOX_PART_BG, style.style_leve) local cb = lvgl.checkbox_create(cc, nil) lvgl.checkbox_set_text(cb, "重要") lvgl.obj_align(cb, img, lvgl.ALIGN_OUT_BOTTOM_LEFT,185+10, 12) lvgl.obj_add_style(cb, lvgl.CHECKBOX_PART_BG, style.style_leve) local cb = lvgl.checkbox_create(cc, nil) lvgl.checkbox_set_text(cb, "一般") lvgl.obj_align(cb, img, lvgl.ALIGN_OUT_BOTTOM_LEFT,275+10, 12) lvgl.obj_add_style(cb, lvgl.CHECKBOX_PART_BG, style.style_leve) local cb = lvgl.checkbox_create(cc, nil) lvgl.checkbox_set_text(cb, "提示") lvgl.obj_align(cb, img, lvgl.ALIGN_OUT_BOTTOM_LEFT,365+10, 12) -- lvgl.obj_add_style(cb, lvgl.CHECKBOX_PART_BG, style.style_leve) lvgl.obj_add_style(cb, lvgl.CONT_PART_MAIN, style.style_leve) ------- local cc1=lvgl.cont_create(SettingCnt, nil) lvgl.obj_set_size(cc1,854, 280) lvgl.obj_add_style(cc1, lvgl.CONT_PART_MAIN, style.style_div) lvgl.obj_align(cc1, cc, lvgl.ALIGN_OUT_BOTTOM_MID,0, 0) -- 创建图片控件 local img = lvgl.img_create(cc1, nil) -- 设置图片显示的图像 lvgl.img_set_src(img, "/lua/t2.png") -- 图片居中 lvgl.obj_align(img, nil, lvgl.ALIGN_IN_TOP_LEFT, 20, 0) local label=lvgl.label_create(img, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 告警阈值") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_LEFT_MID, 8, 0) local cnt=lvgl.cont_create(cc1, nil) lvgl.obj_set_size(cnt,350, 100) -- lvgl.obj_align(cnt, nil, lvgl.ALIGN_IN_CENTER, -200, 50) lvgl.obj_align(cnt, nil, lvgl.ALIGN_IN_TOP_LEFT, 20, 50) lvgl.obj_add_style(cnt, lvgl.CONT_PART_MAIN, style.style_bg_boder) local img1 = lvgl.img_create(cnt, nil) -- 设置图片显示的图像 lvgl.img_set_src(img1, "/lua/battery_jump.png") -- 图片居中 lvgl.obj_align(img1, nil, lvgl.ALIGN_IN_LEFT_MID, 15, -15) local label=lvgl.label_create(cnt, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font16) lvgl.label_set_text(label,"#FFFFFF 温度预警") lvgl.obj_align(label, img1, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 0) local label=lvgl.label_create(cnt, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 温度上限") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_RIGHT_MID, -110, -20) local label=lvgl.label_create(cnt, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 温度下限") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_RIGHT_MID, -110, 20) local up=inputBox.init(cnt,50,40,lvgl.ALIGN_IN_RIGHT_MID,-50, -20,"80",nil,lvgl.ALIGN_OUT_RIGHT_MID) local low=inputBox.init(cnt,50,40,lvgl.ALIGN_IN_RIGHT_MID,-50, 20,"12",nil,lvgl.ALIGN_OUT_RIGHT_MID) ------- local cnt1=lvgl.cont_create(cc1, nil) lvgl.obj_set_size(cnt1,350, 100) -- lvgl.obj_align(cnt1, nil, lvgl.ALIGN_IN_CENTER, 200, 50) lvgl.obj_align(cnt1, cnt, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 15) lvgl.obj_add_style(cnt1, lvgl.CONT_PART_MAIN, style.style_bg_boder) local img2 = lvgl.img_create(cnt1, nil) -- 设置图片显示的图像 lvgl.img_set_src(img2, "/lua/battery_jump.png") -- 图片居中 lvgl.obj_align(img2, nil, lvgl.ALIGN_IN_LEFT_MID, 15, -15) local label=lvgl.label_create(cnt1, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font16) lvgl.label_set_text(label,"#FFFFFF 负载预警") lvgl.obj_align(label, img2, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 0) local label=lvgl.label_create(cnt1, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 负载上限") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_RIGHT_MID, -110, -20) local label=lvgl.label_create(cnt1, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 负载下限") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_RIGHT_MID, -110, 20) local up=inputBox.init(cnt1,50,40,lvgl.ALIGN_IN_RIGHT_MID,-50, -20,"80",nil,lvgl.ALIGN_OUT_RIGHT_MID,0,-20) local low=inputBox.init(cnt1,50,40,lvgl.ALIGN_IN_RIGHT_MID,-50, 20,"12",nil,lvgl.ALIGN_OUT_RIGHT_MID,0,-80) -------------- local cnt2=lvgl.cont_create(cc1, nil) lvgl.obj_set_size(cnt2,350, 100) -- lvgl.obj_align(cnt2, nil, lvgl.ALIGN_IN_CENTER, -200, 50) lvgl.obj_align(cnt2, nil, lvgl.ALIGN_IN_TOP_RIGHT, -20, 50) lvgl.obj_add_style(cnt2, lvgl.CONT_PART_MAIN, style.style_bg_boder) local img1 = lvgl.img_create(cnt2, nil) -- 设置图片显示的图像 lvgl.img_set_src(img1, "/lua/battery_jump.png") -- 图片居中 lvgl.obj_align(img1, nil, lvgl.ALIGN_IN_LEFT_MID, 15, -15) local label=lvgl.label_create(cnt2, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font16) lvgl.label_set_text(label,"#FFFFFF 电压预警") lvgl.obj_align(label, img1, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 0) local label=lvgl.label_create(cnt2, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 电压上限") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_RIGHT_MID, -110, -20) local label=lvgl.label_create(cnt2, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 电压下限") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_RIGHT_MID, -110, 20) local up=inputBox.init(cnt2,50,40,lvgl.ALIGN_IN_RIGHT_MID,-50, -20,"80",nil,lvgl.ALIGN_OUT_LEFT_MID) local low=inputBox.init(cnt2,50,40,lvgl.ALIGN_IN_RIGHT_MID,-50, 20,"12",nil,lvgl.ALIGN_OUT_LEFT_MID) ----------------- local cnt3=lvgl.cont_create(cc1, nil) lvgl.obj_set_size(cnt3,350, 100) -- lvgl.obj_align(cnt3, nil, lvgl.ALIGN_IN_CENTER, 200, 50) lvgl.obj_align(cnt3, cnt2, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 15) lvgl.obj_add_style(cnt3, lvgl.CONT_PART_MAIN, style.style_bg_boder) local img2 = lvgl.img_create(cnt3, nil) -- 设置图片显示的图像 lvgl.img_set_src(img2, "/lua/battery_jump.png") -- 图片居中 lvgl.obj_align(img2, nil, lvgl.ALIGN_IN_LEFT_MID, 15, -15) local label=lvgl.label_create(cnt3, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font16) lvgl.label_set_text(label,"#FFFFFF 电流预警") lvgl.obj_align(label, img2, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 0) local label=lvgl.label_create(cnt3, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 电流上限") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_RIGHT_MID, -110, -20) local label=lvgl.label_create(cnt3, nil) lvgl.label_set_recolor(label, true) lvgl.obj_set_style_local_text_font(label, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font22) lvgl.label_set_text(label,"#FFFFFF 电流下限") lvgl.obj_align(label, nil, lvgl.ALIGN_IN_RIGHT_MID, -110, 20) local up=inputBox.init(cnt3,50,40,lvgl.ALIGN_IN_RIGHT_MID,-50, -20,"80",nil,lvgl.ALIGN_OUT_LEFT_MID,0,-20) local low=inputBox.init(cnt3,50,40,lvgl.ALIGN_IN_RIGHT_MID,-50, 20,"12",nil,lvgl.ALIGN_OUT_LEFT_MID,0,-80) end ```