????本節(jié)將會對之前的代碼從項(xiàng)目需求的角度進(jìn)行細(xì)化和拆分，實(shí)現(xiàn)完整的功能，項(xiàng)目代碼結(jié)構(gòu)做到規(guī)范清晰。

首先，根據(jù)第一階段需求設(shè)計(jì)若干頁面：

• 初始頁

• 登錄頁

• 注冊頁

• APP引導(dǎo)頁

• 主頁

• 個(gè)人中心頁

• 港口能耗頁

• 設(shè)備管理頁

• 告警管理頁

1. 主頁設(shè)計(jì)，功能主要為切換4個(gè)子頁面。

（1）底部橫欄

思想：Bar-->通過參數(shù)selected獲取按鈕編號，將此按鈕變色，onSelectChanged作為監(jiān)聽器，在函數(shù)里調(diào)用監(jiān)聽特定頁面

之前章節(jié)已基本實(shí)現(xiàn)，將其抽出作為一個(gè)函數(shù)ButtomBar

基于MVVM架構(gòu)，將狀態(tài)變量抽出到ViewModel

注意，在UI函數(shù)中需要使用remember包裹狀態(tài)變量

（2）頁面滑動（ViewPager）

使用accompanist庫的Pager函數(shù)實(shí)現(xiàn)

如前面實(shí)現(xiàn)的滑動，將4個(gè)頁面抽出

簡寫4個(gè)頁面

Home類寫上布局

最后，解決之前遺留的一個(gè)小問題，實(shí)現(xiàn)Page填滿除底部的效果。

這里使用fillMaxWidth()函數(shù)鋪滿橫向，用weight填滿除底部外的縱向。

運(yùn)行查看效果：

今天收工，明天實(shí)現(xiàn)登陸注冊和個(gè)人主頁。