HOME 页面设计
# HOME 页面设计
## 效果图
## 容器分区设计
###### 从上图可看出，主要利用四个区域进行页面划分，利用CONT容器控件划分这四个区域
## 代码解析
### 顶部状态栏区域
```lua
_G.statusBox=lvgl.cont_create(lvgl.scr_act(), nil)--创建状态栏区域的容器对象
lvgl.obj_set_click(statusBox,false)
lvgl.obj_set_size(statusBox, 854, 45)
lvgl.obj_align(statusBox, nil, lvgl.ALIGN_IN_TOP_MID, 0, 0)
lvgl.obj_add_style(statusBox, lvgl.CONT_PART_MAIN, stytle.stytle_statusBox)
local sinIcon=lvgl.img_create(statusBox, nil) --信号图标
lvgl.img_set_src(sinIcon, "/lua/waitSin.bin")
lvgl.obj_align(sinIcon,statusBox, lvgl.ALIGN_IN_RIGHT_MID, -15, 0)
local label = lvgl.label_create(statusBox, nil) --运营商名称
lvgl.label_set_recolor(label, true)
lvgl.label_set_text(label, "")
lvgl.obj_align(label,sinIcon, lvgl.ALIGN_OUT_LEFT_MID, -8, 0)
service_sim.signalService(label,sinIcon) --注册有关SIM卡的服务
_G.backIcon=lvgl.cont_create(lvgl.scr_act(), nil) --返回按键
lvgl.obj_set_click(backIcon,false)
lvgl.obj_set_size(backIcon, 300, 45)
lvgl.obj_add_style(backIcon, lvgl.CONT_PART_MAIN, stytle.stytle_divBox)
```
### 位置天气区域
```lua
local font = lvgl.font_load("/lua/timefont.bin") --时间字体
local dateFont = lvgl.font_load("/lua/datefont.bin") --日期字体
skyCont = lvgl.cont_create(cont, nil) --创建天气区域
lvgl.obj_set_click(skyCont,false)
lvgl.obj_set_size(skyCont, 854, 200)
-- lvgl.obj_set_auto_realign(skyCont, true)
lvgl.obj_align(skyCont, cont, lvgl.ALIGN_IN_TOP_MID, 0, 0)
lvgl.obj_add_style(skyCont, lvgl.CONT_PART_MAIN, stytle.stytle_divBox)
_G.skyimg = lvgl.img_create(skyCont, nil)
-- 设置图片显示的图像
lvgl.img_set_src(skyimg, "/lua/icon_empty.png")
-- 图片居中
lvgl.obj_align(skyimg, skyCont, lvgl.ALIGN_CENTER, 120, 10)
_G.TEMPLabel=lvgl.label_create(skyCont, nil)
lvgl.label_set_recolor(TEMPLabel, true)
lvgl.obj_set_style_local_text_font(TEMPLabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font)
lvgl.label_set_text(TEMPLabel, "#FFFFFF ".."--")
lvgl.obj_align(TEMPLabel, skyimg, lvgl.ALIGN_OUT_RIGHT_MID,25,-15)
_G.weatherTextLabel=lvgl.label_create(skyCont, nil)
lvgl.label_set_recolor(weatherTextLabel, true)
-- lvgl.obj_set_style_local_text_font(TEMPLabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font)
lvgl.label_set_text(weatherTextLabel, "#FFFFFF ".."")
lvgl.obj_align(weatherTextLabel, TEMPLabel, lvgl.ALIGN_OUT_BOTTOM_LEFT,5,15)
local tempIcon = lvgl.img_create(skyCont, nil)
-- 设置图片显示的图像
lvgl.img_set_src(tempIcon, "/lua/tempIcon.png")
-- 图片居中
lvgl.obj_align(tempIcon, TEMPLabel, lvgl.ALIGN_OUT_RIGHT_MID, 3,-10)
service_weather.weatherService(skyimg,TEMPLabel,weatherTextLabel)
----------------------
_G.TIMELabel = lvgl.label_create(skyCont, nil)
lvgl.label_set_recolor(TIMELabel, true)
lvgl.obj_set_style_local_text_font(TIMELabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, font)
lvgl.label_set_text(TIMELabel, "#FFFFFF ".."正在获取时间...")
lvgl.obj_align(TIMELabel, skyCont, lvgl.ALIGN_IN_TOP_MID, -330,50)
_G.DATELabel = lvgl.label_create(skyCont, nil)
lvgl.label_set_recolor(DATELabel, true)
lvgl.obj_set_style_local_text_font(DATELabel, lvgl.LABEL_PART_MAIN, lvgl.STATE_DEFAULT, dateFont)
lvgl.label_set_text(DATELabel, "#FFFFFF ".."- -")
lvgl.obj_align(DATELabel, TIMELabel, lvgl.ALIGN_OUT_BOTTOM_LEFT, 5,20)
service_time.timeService(TIMELabel,DATELabel)
local localtionImg = lvgl.img_create(skyCont, nil)
-- 设置图片显示的图像
lvgl.img_set_src(localtionImg, "/lua/locationIcon.png")
-- 图片居中
lvgl.obj_align(localtionImg,TIMELabel, lvgl.ALIGN_OUT_BOTTOM_LEFT, 0, 50)
_G.locationLabel=lvgl.label_create(skyCont, nil)
lvgl.label_set_recolor(locationLabel, true)
lvgl.label_set_text(locationLabel, "#FFFFFF ".."--")
lvgl.obj_align(locationLabel, localtionImg, lvgl.ALIGN_OUT_RIGHT_BOTTOM, 5,-5)
service_location.addrService(_G.locationLabel)
```
### 按键区域
```lua
local body = lvgl.cont_create(cont, nil) --创建按键区域容器
lvgl.obj_set_click(body,false)
lvgl.obj_set_size(body, 854, 180)
lvgl.cont_set_layout(body, lvgl.LAYOUT_PRETTY_MID)
lvgl.obj_align(body, cont, lvgl.ALIGN_IN_TOP_MID, 0, 200)
lvgl.obj_add_style(body, lvgl.CONT_PART_MAIN, stytle.stytle_divBox)
----------------------------图标创建----------------------------------------
airimg = lvgl.img_create(body, nil)
lvgl.obj_set_click(airimg,true)
lvgl.obj_set_event_cb(airimg, event_handler)
lvgl.img_set_src(airimg, "/lua/air.png")
lvgl.obj_add_style(airimg, lvgl.CONT_PART_MAIN, stytle.stytle_icon)
mediaimg = lvgl.img_create(body, nil)
lvgl.obj_set_click(mediaimg,true)
lvgl.obj_set_event_cb(mediaimg, event_handler)
lvgl.img_set_src(mediaimg, "/lua/media.png")
lvgl.obj_add_style(mediaimg, lvgl.CONT_PART_MAIN, stytle.stytle_icon)
updataimg = lvgl.img_create(body, nil)
lvgl.obj_set_click(updataimg,true)
lvgl.obj_set_event_cb(updataimg, event_handler)
lvgl.img_set_src(updataimg, "/lua/updata.png")
lvgl.obj_add_style(updataimg, lvgl.CONT_PART_MAIN, stytle.stytle_icon)
testimg = lvgl.img_create(body, nil)
lvgl.obj_set_click(testimg,true)
lvgl.obj_set_event_cb(testimg, event_handler)
lvgl.img_set_src(testimg, "/lua/test.png")
lvgl.obj_add_style(testimg, lvgl.CONT_PART_MAIN, stytle.stytle_icon)
local function makeLable(obj,text,al) --图标名称
local label = lvgl.label_create(cont,nil)
lvgl.label_set_recolor(label, true)
lvgl.label_set_text(label, "#FFFFFF "..text)
lvgl.obj_align(label,obj, al, 0, 10)
end
------------------------------------------------------------------------
makeLable(airimg,"空调控制器",lvgl.ALIGN_OUT_BOTTOM_MID)
makeLable(mediaimg,"多媒体下载",lvgl.ALIGN_OUT_BOTTOM_MID)
makeLable(updataimg,"远程升级",lvgl.ALIGN_OUT_BOTTOM_MID)
makeLable(testimg,"测试",lvgl.ALIGN_OUT_BOTTOM_MID)
```
### 底部信息区域
```lua
local function makeLable(text,al,x,y)
local label = lvgl.label_create(cont, nil)
lvgl.label_set_recolor(label, true)
lvgl.label_set_text(label, "#FFFFFF "..text)
lvgl.obj_align(label,cont, al, x,y)
end
makeLable("工程版本：V"..VERSION,lvgl.ALIGN_IN_BOTTOM_LEFT,30,-10)
makeLable(VERSION_PRI,lvgl.ALIGN_IN_BOTTOM_RIGHT,-30,-10)
_G.iccidLabel = lvgl.label_create(cont, nil)
lvgl.label_set_recolor(iccidLabel, true)
lvgl.label_set_text(iccidLabel, "#FFFFFF ".."正在获取ICCID")
lvgl.obj_align(iccidLabel,cont, lvgl.ALIGN_IN_BOTTOM_MID, 0,-10)
service_sim.ICCIDservice(iccidLabel)
```