房產(chǎn)中介網(wǎng)站快速排名優(yōu)化怎么樣
一.?樣例介紹
本篇Codelab基于自適應(yīng)布局和響應(yīng)式布局，實(shí)現(xiàn)購(gòu)物應(yīng)用在手機(jī)、折疊屏、平板不同屏幕尺寸設(shè)備上按不同設(shè)計(jì)顯示。通過(guò)三層工程結(jié)構(gòu)組織代碼，實(shí)現(xiàn)一次開(kāi)發(fā)，多端部署?。
手機(jī)運(yùn)行效果如圖所示：
?
折疊屏運(yùn)行效果圖：
?
平板運(yùn)行效果圖：
相關(guān)概念
- 一次開(kāi)發(fā)，多端部署：一套代碼工程，一次開(kāi)發(fā)上架，多端按需部署。支撐開(kāi)發(fā)者快速高效的開(kāi)發(fā)支持多種終端設(shè)備形態(tài)的應(yīng)用。
- 自適應(yīng)布局：當(dāng)外部容器大小發(fā)生變化時(shí)，元素可以根據(jù)相對(duì)關(guān)系自動(dòng)變化以適應(yīng)外部容器變化的布局能力。相對(duì)關(guān)系如占比、固定寬高比、顯示優(yōu)先級(jí)等。當(dāng)前自適應(yīng)布局能力有7種：拉伸能力、均分能力、占比能力、縮放能力、延伸能力、隱藏能力、折行能力。自適應(yīng)布局能力可以實(shí)現(xiàn)界面顯示隨外部容器大小連續(xù)變化。
- 響應(yīng)式布局：當(dāng)外部容器大小發(fā)生變化時(shí)，元素可以根據(jù)斷點(diǎn)、柵格或特定的特征（如屏幕方向、窗口寬高等）自動(dòng)變化以適應(yīng)外部容器變化的布局能力。當(dāng)前響應(yīng)式布局能力有3種：斷點(diǎn)、媒體查詢、柵格布局。
- GridRow：柵格容器組件，僅可以和柵格子組件（GridCol）在柵格布局場(chǎng)景中使用。
- GridCol：柵格子組件，必須作為柵格容器組件（GridRow）的子組件使用。
完整示例：gitee源碼地址
二.?環(huán)境搭建
我們首先需要完成HarmonyOS開(kāi)發(fā)環(huán)境搭建，可參照如下步驟進(jìn)行。
軟件要求
- DevEco?Studio版本：DevEco?Studio?3.1?Release及以上版本。
- HarmonyOS?SDK版本：API?version?9及以上版本。
硬件要求
- 設(shè)備類型：華為手機(jī)或運(yùn)行在DevEco?Studio上的華為手機(jī)設(shè)備模擬器。
- HarmonyOS系統(tǒng)：3.1.0?Developer?Release及以上版本。
環(huán)境搭建
- 安裝DevEco?Studio，詳情請(qǐng)參考下載和安裝軟件。
- 設(shè)置DevEco?Studio開(kāi)發(fā)環(huán)境，DevEco?Studio開(kāi)發(fā)環(huán)境需要依賴于網(wǎng)絡(luò)環(huán)境，需要連接上網(wǎng)絡(luò)才能確保工具的正常使用，可以根據(jù)如下兩種情況來(lái)配置開(kāi)發(fā)環(huán)境：
- 如果可以直接訪問(wèn)Internet，只需進(jìn)行下載HarmonyOS?SDK操作。
- 如果網(wǎng)絡(luò)不能直接訪問(wèn)Internet，需要通過(guò)代理服務(wù)器才可以訪問(wèn)，請(qǐng)參考配置開(kāi)發(fā)環(huán)境。
- 開(kāi)發(fā)者可以參考以下鏈接，完成設(shè)備調(diào)試的相關(guān)配置：
- 使用真機(jī)進(jìn)行調(diào)試
- 使用模擬器進(jìn)行調(diào)試
三.代碼結(jié)構(gòu)解讀
本篇Codelab只對(duì)核心代碼進(jìn)行講解，common為公共能力層，feature為功能模塊層，本示例分為六個(gè)模塊，product則為產(chǎn)品層。對(duì)于完整代碼，我們會(huì)在源碼下載或gitee中提供。
├──common/src/main/ets???????????????//?公共能力層
│??├──bean
│??│??├──CommodityModel.ets??????????//?商品數(shù)據(jù)實(shí)體類
│??│??├──OrderModel.ets??????????????//?訂單數(shù)據(jù)實(shí)體類
│??│??└──ProductModel.ets????????????//?購(gòu)物車商品數(shù)據(jù)實(shí)體類
│??├──components
│??│??├──CommodityList.ets???????????//?商品列表組件
│??│??├──CounterProduct.ets??????????//?數(shù)量加減組件
│??│??└──EmptyComponent.ets??????????//?無(wú)數(shù)據(jù)顯示組件
│??├──constants
│??│??├──BreakpointConstants.ets?????//?斷點(diǎn)常量類
│??│??├──GridConstants.ets???????????//?柵格常量類
│??│??└──StyleConstants.ets??????????//?樣式常量類
│??├──utils
│??│??├──BreakpointSystem.ets????????//?斷點(diǎn)工具類
│??│??├──CommonDataSource.ets????????//?數(shù)據(jù)封裝類
│??│??├──LocalDataManager.ets????????//?數(shù)據(jù)操作管理類
│??│??├──Logger.ets.ets??????????????//?日志工具類
│??│??└──Utils.ets???????????????????//?方法工具類
│??└──viewmodel
│?????└──ShopData.ets????????????????//?商品應(yīng)用數(shù)據(jù)
├──features??????????????????????????//?功能模塊層
│??├──commoditydetail/src/main/ets???//?商品詳情內(nèi)容區(qū)
│??│??├──bean
│??│??│??└──TypeModel.ets????????????//?實(shí)體類
│??│??├──components
│??│??│??├──CapsuleGroupButton.ets???//?自定義按鈕組件
│??│??│??├──CommodityDetail.ets??????//?商品詳情組件
│??│??│??└──SpecificationDialog.ets??//?商品規(guī)格彈框
│??│??├──constants
│??│??│??└──CommodityConstants.ets???//?商品詳情區(qū)常量類
│??│??└──viewmodel
│??│?????└──CommodityDetailData.ets??//?商品詳情數(shù)據(jù)類
│??├──home/src/main/ets??????????????//?首頁(yè)內(nèi)容區(qū)
│??│??├──components
│??│??│??└──Home.ets?????????????????//?首頁(yè)內(nèi)容組件
│??│??└──viewmodel
│??│?????└──HomeData.ets?????????????//?首頁(yè)數(shù)據(jù)
│??├──newproduct/src/main/ets????????//?新品內(nèi)容區(qū)
│??│??├──components
│??│??│??└──NewProduct.ets???????????//?新品內(nèi)容組件
│??│??└──viewmodel
│??│?????└──NewProductData.ets???????//?新品數(shù)據(jù)
│??├──orderdetail/src/main/ets???????//?訂單相關(guān)內(nèi)容區(qū)
│??│??├──components
│??│??│??├──AddressInfo.ets??????????//?收件人信息組件
│??│??│??├──CommodityOrderItem.ets???//?商品訂單信息組件
│??│??│??├──CommodityOrderList.ets???//?商品訂單列表組件
│??│??│??├──ConfirmOrder.ets?????????//?確認(rèn)訂單組件
│??│??│??├──HeaderBar.ets????????????//?標(biāo)題組件
│??│??│??├──OrderDetailList.ets??????//?訂單分類列表組件
│??│??│??├──OrderListContent.ets?????//?訂單分類列表內(nèi)容組件
│??│??│??└──PayOrder.ets?????????????//?支付訂單組件
│??│??├──constants
│??│??│??└──OrderDetailConstants.ets?//?訂單區(qū)常量類
│??│??└──viewmodel
│??│?????└──OrderData.ets????????????//?訂單數(shù)據(jù)
│??├──personal/src/main/ets??????????//?我的內(nèi)容區(qū)
│??│??├──bean
│??│??│??└──IconButtonModel.ets??????//?按鈕圖標(biāo)實(shí)體類
│??│??├──components
│??│??│??├──IconButton.ets???????????//?圖片按鈕組件
│??│??│??├──LiveList.ets?????????????//?直播列表組件
│??│??│??└──Personal.ets?????????????//?我的內(nèi)容組件
│??│??├──constants
│??│??│??└──PersonalConstants.ets????//?我的常量類
│??│??└──viewmodel
│??│?????└──PersonalData.ets?????????//?我的數(shù)據(jù)
│??└──shopcart/src/main/ets??????????//?購(gòu)物車內(nèi)容區(qū)
│?????├──components
│?????│??└──ShopCart.ets?????????????//?購(gòu)物車內(nèi)容組件
│?????└──constants
│????????└──ShopCartConstants.ets????//?購(gòu)物車常量類
└──products??????????????????????????//?產(chǎn)品層
???└──phone/src/main/ets?????????????//?支持手機(jī)、平板
??????├──constants
??????│??└──PageConstants.ets????????//?頁(yè)面常量類
??????├──entryability
??????│??└──EntryAbility.ets??????????//?程序入口類
??????├──pages
??????│??├──CommodityDetailPage.ets??//?訂單詳情頁(yè)
??????│??├──ConfirmOrderPage.ets?????//?確認(rèn)訂單頁(yè)
??????│??├──MainPage.ets?????????????//?主頁(yè)
??????│??├──OrderDetailListPage.ets??//?訂單分類列表頁(yè)
??????│??├──PayOrderPage.ets?????????//?支付訂單頁(yè)
??????│??└──SplashPage.ets???????????//?啟動(dòng)過(guò)渡頁(yè)
??????└──viewmodel
?????????└──MainPageData.ets?????????//?主頁(yè)數(shù)據(jù)
四.?應(yīng)用主框架
4.1?啟動(dòng)頁(yè)
在工程pages目錄中，選中Index.ets，點(diǎn)擊鼠標(biāo)右鍵?>?Refactor?>?Rename，改名為SplashPage.ets。改名后，修改工程entryability目錄下EntryAbility.ets文件中windowStage.loadContent方法第一個(gè)參數(shù)為pages/SplashPage。在該頁(yè)面的周期函數(shù)aboutToAppear里添加一個(gè)2秒的定時(shí)任務(wù)跳轉(zhuǎn)到主頁(yè)實(shí)現(xiàn)。
//?EntryAbility.ets
windowStage.loadContent('pages/SplashPage', (err,?data) => {if (err.code) {...}
});//?SplashPage.ets
build() {Column() {...}.height(StyleConstants.FULL_HEIGHT).width(StyleConstants.FULL_WIDTH).backgroundColor($r('app.color.page_background'))
}aboutToAppear() {this.breakpointSystem.register();this.timeOutId?= setTimeout(() => {
????router.replaceUrl({?url:?PageConstants.MAIN_PAGE_URL }).catch(err => {
????????Logger.error(JSON.stringify(err));})},?PageConstants.DELAY_TIME);
}aboutToDisappear() {this.breakpointSystem.unregister();clearTimeout(this.timeOutId);
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖：
平板運(yùn)行效果圖：
4.2?主頁(yè)
本篇Codelab主頁(yè)由Tabs容器組件和四個(gè)TabContent子組件組成，四個(gè)TabContent頁(yè)簽的內(nèi)容視圖分別為首頁(yè)（Home）、新品（NewProduct）、購(gòu)物車（ShopCart）、我的（Personal）。根據(jù)用戶使用場(chǎng)景，通過(guò)響應(yīng)式布局的媒體查詢，監(jiān)聽(tīng)?wèi)?yīng)用窗口寬度變化，獲取當(dāng)前應(yīng)用所處的斷點(diǎn)值，設(shè)置Tabs的頁(yè)簽位置，lg斷點(diǎn)如平板則顯示側(cè)邊欄，其他斷點(diǎn)的則顯示底部欄。
///?MainPage.ets
build() {Column() {Tabs({
??????barPosition:?this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_LG??
????????BarPosition.Start?:?BarPosition.End,
??????index:?this.currentPageIndex
????}) { ... .barWidth(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_LG ?$r('app.float.bar_width') :?StyleConstants.FULL_WIDTH).barHeight(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_LG ?
??????StyleConstants.SIXTY_HEIGHT : $r('app.float.vp_fifty_six')).vertical(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_LG)}.backgroundColor($r('app.color.page_background'))
}
主頁(yè)頁(yè)面展示：
五.?頁(yè)面介紹
5.1?首頁(yè)標(biāo)簽頁(yè)
首頁(yè)標(biāo)簽頁(yè)通過(guò)自適應(yīng)布局的均分、拉伸等能力實(shí)現(xiàn)搜索框、分類等布局，通過(guò)響應(yīng)式布局的媒體查詢、斷點(diǎn)能力設(shè)置輪播圖數(shù)、商品列表數(shù)。
通過(guò)響應(yīng)式布局的媒體查詢，監(jiān)聽(tīng)?wèi)?yīng)用窗口寬度變化，獲取當(dāng)前應(yīng)用所處的斷點(diǎn)值，設(shè)置商品列表列數(shù)和輪播圖數(shù)，lg斷點(diǎn)顯示4列3張輪播圖，md斷點(diǎn)顯示3列2張輪播圖，sm斷點(diǎn)顯示2列1張輪播圖。
//?Home.ets
@Builder?CustomSwiper() {Swiper() {ForEach(swiperImage, (item:?Resource) => {Image(item).width(StyleConstants.FULL_WIDTH).aspectRatio(StyleConstants.IMAGE_ASPECT_RATIO)}, item => JSON.stringify(item))}.itemSpace(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_SM ? 0 :
????StyleConstants.ITEM_SPACE).indicator(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_SM).displayCount(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_LG ?
????StyleConstants.DISPLAY_THREE :(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_MD ??StyleConstants.DISPLAY_TWO :
????StyleConstants.DISPLAY_ONE))
}//?Home.ets
CommodityList({
??commodityList:?$commodityList,
??column: this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_LG ??StyleConstants.DISPLAY_FOUR :(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_MD ?
????StyleConstants.DISPLAY_THREE :?StyleConstants.DISPLAY_TWO),onClickItem: (data:?Commodity) => this.onClickItem(data)
})//?CommodityList.ets
build() {if (this.commodityList.length?> 0) {List({?space:?StyleConstants.TWELVE_SPACE?}) {LazyForEach(new CommonDataSource(this.commodityList), (item:?Commodity) => {...}, item => JSON.stringify(item))}....lanes(this.column)} else {EmptyComponent({?outerHeight:?StyleConstants.FIFTY_HEIGHT })}
}
使用自適應(yīng)布局的均分能力，在Flex布局中設(shè)置主軸上的對(duì)齊方式為FlexAlign.SpaceAround，使循環(huán)渲染的組件之間距離相同，第一個(gè)元素到行首的距離和最后一個(gè)元素到行尾的距離是相鄰元素之間距離的一半。
//?Home.ets
@Builder?ActivityTitle() {Flex({?justifyContent:?FlexAlign.SpaceAround?}) {ForEach(activityTitle, (item:?ActivityTitleModel,?index:?number) => {Flex({
????????direction:?FlexDirection.Column,
????????justifyContent:?FlexAlign.Center,
????????alignItems:?ItemAlign.Center
??????}) {...}}, item => JSON.stringify(item))}...
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖
平板運(yùn)行效果圖
5.2?新品標(biāo)簽頁(yè)
新品標(biāo)簽頁(yè)由輪播圖、分類、新品列表組成，通過(guò)響應(yīng)式布局的媒體查詢、斷點(diǎn)能力和自適應(yīng)布局的均分能力，實(shí)現(xiàn)不同設(shè)備類型顯示不同效果，實(shí)現(xiàn)邏輯同主頁(yè)。
通過(guò)響應(yīng)式布局的媒體查詢，監(jiān)聽(tīng)?wèi)?yīng)用窗口寬度變化，獲取當(dāng)前應(yīng)用所處的斷點(diǎn)值設(shè)置新品列表，sm斷點(diǎn)顯示2列，md、lg斷點(diǎn)顯示3列。
//?NewProduct.ets
@Builder?ProductList() {List({?space:?StyleConstants.TWELVE_SPACE?}) {LazyForEach(new CommonDataSource(productData), (item:?ProductDataModel) => {ListItem() {...}, item => JSON.stringify(item))}.lanes(this.currentBreakpoint?===?BreakpointConstants.BREAKPOINT_SM ?
????StyleConstants.DISPLAY_TWO :?StyleConstants.DISPLAY_THREE).padding({?left: $r('app.float.vp_twelve'),?right: $r('app.float.vp_twelve') })
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖
平板運(yùn)行效果圖
5.3?購(gòu)物車標(biāo)簽頁(yè)
購(gòu)物車標(biāo)簽頁(yè)，由購(gòu)物車列表和商品列表組成，商品列表實(shí)現(xiàn)邏輯同主頁(yè)的商品列表，購(gòu)物車列表使用自適應(yīng)布局的均分能力實(shí)現(xiàn)。
//?ShopCart.ets
@Builder?CartItem(item:?Product,?index:?number) {Flex({?direction:?FlexDirection.Row,?alignItems:?ItemAlign.Center?}) {...Flex({?direction:?FlexDirection.Column,?justifyContent:?FlexAlign.SpaceAround?}) {Text($r('app.string.commodity_piece_description',?item.name,?item.description))...Text(`${Object.values(item.specifications).join('，')}`)...Flex({?justifyContent:?FlexAlign.SpaceBetween?}) {Text() {...}CounterProduct({
??????????count:?item.count,onNumberChange: (num:?number) => {this.onChangeCount(num,?item);}})}}...}
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖
平板運(yùn)行效果圖
5.4?我的標(biāo)簽頁(yè)
我的標(biāo)簽頁(yè)主要由個(gè)人信息、我的訂單、文字圖片按鈕、直播列表組成，直播列表實(shí)現(xiàn)方案同主頁(yè)商品列表，其他則使用自適應(yīng)布局的均分能力，Flex布局設(shè)置主軸上的對(duì)齊方式為FlexAlign.SpaceAround。
//?Personal.ets
@Builder?Order() {Flex({direction:?FlexDirection.Column}) {Flex({
??????justifyContent:?FlexAlign.SpaceBetween,
??????alignItems:?ItemAlign.Center
????}) {Text($r('app.string.order_mine')).fontSize($r('app.float.middle_font_size'))Row() {...}...})}Flex({
????justifyContent:?FlexAlign.SpaceAround,
????alignItems:?ItemAlign.Center
??}) {ForEach(this.orderIconButton, (iconButton:?IconButtonModel) => {IconButton({
????????props:?iconButton,
????????click: this.onOrderButtonClick.bind(this,?iconButton.key)})}, (iconButton) => JSON.stringify(iconButton))}.width(StyleConstants.FULL_WIDTH)
}@Builder?IconDock(buttons:?IconButtonModel[]) {Flex({
????justifyContent:?FlexAlign.SpaceAround,
????alignItems:?ItemAlign.Center
??}) {ForEach(buttons, (iconButton:?IconButtonModel) => {IconButton({
????????props:?iconButton})}, (iconButton) => JSON.stringify(iconButton))}.height($r('app.float.icon_dock_height')).padding($r('app.float.vp_twelve')).cardStyle()
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖：
平板運(yùn)行效果圖：
5.5?商品詳情頁(yè)
商品詳情頁(yè)整體由輪播圖、商品信息、底部按鈕欄組成，通過(guò)響應(yīng)式布局能力的柵格布局，實(shí)現(xiàn)不同設(shè)備類型顯示不同的效果，并通過(guò)自適應(yīng)布局的拉伸能力，設(shè)置flexGrow屬性使按鈕位于底部。
- 在sm斷點(diǎn)下，輪播圖占4個(gè)柵格，商品信息占4個(gè)柵格，底部按鈕欄占4個(gè)柵格。
- 在md斷點(diǎn)下，輪播圖占8個(gè)柵格，商品信息占8個(gè)柵格，底部按鈕欄占8個(gè)柵格。
- 在lg斷點(diǎn)下，輪播圖占12個(gè)柵格，商品信息占8個(gè)柵格偏移2個(gè)柵格，底部按鈕欄占8個(gè)柵格偏移2個(gè)柵格。
//?CommodityDetail.ets
build() {Stack({?alignContent:?Alignment.TopStart?}) {Flex({?direction:?FlexDirection.Column?}) {Scroll() {GridRow({
??????????columns:?{
????????????sm:?GridConstants.COLUMN_FOUR,
????????????md:?GridConstants.COLUMN_EIGHT,
????????????lg:?GridConstants.COLUMN_TWELVE
??????????},
??????????gutter:?GridConstants.GUTTER_TWELVE
????????}) {GridCol({
????????????span:?{
??????????????sm:?GridConstants.SPAN_FOUR,
??????????????md:?GridConstants.SPAN_EIGHT,
??????????????lg:?GridConstants.SPAN_TWELVE?}
??????????}) {this.CustomSwiper(this.info.images)}GridCol({
????????????span:?{
??????????????sm:?GridConstants.SPAN_FOUR,
??????????????md:?GridConstants.SPAN_EIGHT,
??????????????lg:?GridConstants.SPAN_EIGHT
????????????},
????????????offset:?{?lg:?GridConstants.OFFSET_TWO?}
??????????}) {Column() {...}}}}.flexGrow(StyleConstants.FLEX_GROW)GridRow({
????????columns:?{
??????????sm:?GridConstants.COLUMN_FOUR,
??????????md:?GridConstants.COLUMN_EIGHT,
??????????lg:?GridConstants.COLUMN_TWELVE
????????},
????????gutter:?GridConstants.GUTTER_TWELVE
??????}) {GridCol({
??????????span:?{
????????????sm:?GridConstants.SPAN_FOUR,
????????????md:?GridConstants.SPAN_EIGHT,
????????????lg:?GridConstants.SPAN_EIGHT
??????????},
??????????offset:?{?lg:?GridConstants.OFFSET_TWO?}?}) {this.BottomMenu()}}}...}
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖：
平板運(yùn)行效果圖：
5.6?訂單確認(rèn)頁(yè)
訂單確認(rèn)頁(yè)由上方收件信息、訂單信息、底部的總價(jià)和提交訂單按鈕組成，通過(guò)響應(yīng)式布局的柵格布局，實(shí)現(xiàn)不同設(shè)備類型顯示不同的效果，并通過(guò)自適應(yīng)布局的拉伸能力，設(shè)置flexGrow屬性使總價(jià)和提交訂單按鈕位于底部。
- 在sm斷點(diǎn)下，上方收件信息和訂單信息占4個(gè)柵格，底部總價(jià)占2個(gè)柵格，底部提交訂單按鈕占2個(gè)柵格。
- 在md斷點(diǎn)下，上方收件信息和訂單信息占8個(gè)柵格，底部總價(jià)占2個(gè)柵格，底部按鈕占3個(gè)柵格偏移3個(gè)柵格。
- 在lg斷點(diǎn)下，上方收件信息和訂單信息占8個(gè)柵格偏移2個(gè)柵格，底部總價(jià)占2個(gè)柵格偏移2個(gè)柵格，底部按鈕占3個(gè)柵格偏移3個(gè)柵格。
//?ConfirmOrder.ets
build() {Flex({?direction:?FlexDirection.Column?}) {HeaderBar({...})Column(){Scroll() {GridRow({
??????????columns:?{
????????????sm:?GridConstants.COLUMN_FOUR,
????????????md:?GridConstants.COLUMN_EIGHT,
????????????lg:?GridConstants.COLUMN_TWELVE
????????????}
??????????}) {GridCol({
????????????span:?{
??????????????sm:?GridConstants.SPAN_FOUR,
??????????????md:?GridConstants.SPAN_EIGHT,
??????????????lg:?GridConstants.SPAN_EIGHT
????????????},
????????????offset:?{?lg:?GridConstants.OFFSET_TWO?}
??????????}) {Column() {AddressInfo()CommodityOrderList()}}}}.scrollBar(BarState.Off)}.flexGrow(StyleConstants.FLEX_GROW).padding({?left: $r('app.float.vp_twelve'),?right: $r('app.float.vp_twelve') })GridRow({
??????columns:?{
????????sm:?GridConstants.COLUMN_FOUR,
????????md:?GridConstants.COLUMN_EIGHT,
????????lg:?GridConstants.COLUMN_TWELVE
??????},
??????gutter:?GridConstants.GUTTER_TWELVE
????}) {GridCol({
????????span:?{
??????????sm:?GridConstants.SPAN_TWO,
??????????md:?GridConstants.SPAN_TWO,
??????????lg:?GridConstants.SPAN_TWO
????????},
????????offset:?{?lg:?GridConstants.OFFSET_TWO?}
??????}) {Text($r('app.string.bottom_bar_amount', this.amount))...}GridCol({
????????span:?{
??????????sm:?GridConstants.SPAN_TWO,
??????????md:?GridConstants.SPAN_THREE,
??????????lg:?GridConstants.SPAN_THREE
????????},
????????offset:?{
??????????md:?GridConstants.OFFSET_THREE,
??????????lg:?GridConstants.OFFSET_THREE
????????}
??????}) {Button($r('app.string.bottom_bar_button'))...}}...}...
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖：
平板運(yùn)行效果圖：
5.7?訂單支付頁(yè)
訂單支付頁(yè)整體由上方訂單信息和底部的去支付按鈕組成，通過(guò)使用響應(yīng)式布局的柵格布局實(shí)現(xiàn)不同設(shè)備類型顯示不同效果，并通過(guò)自適應(yīng)布局的拉伸能力，設(shè)置flexGrow屬性使去支付按鈕位于底部。
- 在sm斷點(diǎn)下，上方訂單信息占4個(gè)柵格，底部去支付按鈕占2個(gè)柵格偏移2個(gè)柵格。
- 在md斷點(diǎn)下，上方訂單信息占8個(gè)柵格，底部去支付按鈕占2個(gè)柵格偏移6個(gè)柵格。
- 在lg斷點(diǎn)下，上方訂單信息占8個(gè)柵格偏移2個(gè)柵格，底部去支付按鈕占2個(gè)柵格偏移8個(gè)柵格。
//?PayOrder.ets
build() {Flex({?direction:?FlexDirection.Column?}) {HeaderBar({...})Stack({?alignContent:?Alignment.TopStart?}) {...Column() {Scroll() {GridRow({
????????????columns:?{
??????????????sm:?GridConstants.COLUMN_FOUR,
??????????????md:?GridConstants.COLUMN_EIGHT,
??????????????lg:?GridConstants.COLUMN_TWELVE
????????????}
??????????}) {GridCol({
??????????????span:?{
????????????????sm:?GridConstants.SPAN_FOUR,
????????????????md:?GridConstants.SPAN_EIGHT,
????????????????lg:?GridConstants.SPAN_EIGHT
??????????????},
??????????????offset:?{?lg:?GridConstants.OFFSET_TWO?}
????????????}) {Column() {this.OrderStatus()...}}}}.scrollBar(BarState.Off)}.padding({?left: $r('app.float.vp_twelve'),?right: $r('app.float.vp_twelve') })}.flexGrow(StyleConstants.FLEX_GROW)GridRow({
??????columns:?{
????????sm:?GridConstants.COLUMN_FOUR,
????????md:?GridConstants.COLUMN_EIGHT,
????????lg:?GridConstants.COLUMN_TWELVE
??????}
????}) {GridCol({
????????span:?{
??????????sm:?GridConstants.SPAN_TWO,
??????????md:?GridConstants.SPAN_TWO,
??????????lg:?GridConstants.SPAN_TWO
????????},
????????offset:?{
??????????sm:?GridConstants.OFFSET_TWO,
??????????md:?GridConstants.OFFSET_SIX,
??????????lg:?GridConstants.OFFSET_EIGHT
????????}
??????}) {this.BottomBar()}}}...
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖：
平板運(yùn)行效果圖：
5.8?訂單列表頁(yè)
訂單列表頁(yè)整體布局通過(guò)響應(yīng)式布局的柵格布局，實(shí)現(xiàn)不同設(shè)備類型顯示不同的效果。
- 在sm斷點(diǎn)下，整體UX占4個(gè)柵格。
- 在md斷點(diǎn)下，整體UX占8個(gè)柵格。
- 在lg斷點(diǎn)下，整體UX占8個(gè)柵格偏移2個(gè)柵格。
//?OrderListContent.ets
build() {Column() {Scroll() {GridRow({
????????columns:?{
??????????sm:?GridConstants.COLUMN_FOUR,
??????????md:?GridConstants.COLUMN_EIGHT,
??????????lg:?GridConstants.COLUMN_TWELVE
????????}
??????}) {GridCol({
??????????span:?{
????????????sm:?GridConstants.SPAN_FOUR,
????????????md:?GridConstants.SPAN_EIGHT,
????????????lg:?GridConstants.SPAN_EIGHT
??????????},
??????????offset:?{?lg:?GridConstants.OFFSET_TWO?}
????????}) {Column() {...}}}}.scrollBar(BarState.Off)}...
}
手機(jī)運(yùn)行效果圖：
折疊屏運(yùn)行效果圖：
平板運(yùn)行效果圖：
六.??總結(jié)
您已經(jīng)完成了本次Codelab的學(xué)習(xí)，并了解到以下知識(shí)點(diǎn)：
- 針對(duì)不同屏幕尺寸的設(shè)備完成一次開(kāi)發(fā)，多端部署頁(yè)面設(shè)計(jì)。
- 按照三層工程結(jié)構(gòu)劃分模塊、組織代碼。
- 通過(guò)自適應(yīng)布局、響應(yīng)式布局、柵格布局實(shí)現(xiàn)一次開(kāi)發(fā)，多端部署。