鸿蒙一次开发，多端摆设（九）应用市场首页

本末节将以应用市场首页为例，介绍如何使用自适应布局能力和响应式布局能力适配差别尺寸窗口。
页面设计

一个典范的应用市场首页的UX设计如下所示。

观察应用市场首页的页面设计，差别断点下的页面设计有较多相似的地方。
据此，我们可以将页面分拆为多个组成部门。

• 底部/侧边导航栏
  
• 标题栏与搜索栏
  
• 运营横幅
  
• 快捷入口
  
• 精品应用
  

接下来我们逐一分析各部门的实现。
底部/侧边导航栏

在sm和md断点下，导航栏在底部；在lg断点下，导航栏在左侧。可以通过 Tab组件 的barPosition和vertical属性控制TabBar的位置，同时还可以通过barWidth和barHeight属性控制TabBar的尺寸。

1. import Home from '../common/Home';//组件请参考相关实例
2. import TabBarItem from '../common/TabBarItem';
4. @Entry
5. @Component
6. struct Index {
7.   @State currentIndex: number = 0;
8.   @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md';
9.   @Builder
10.   tabItem(index: number, title: Resource, icon: Resource, iconSelected: Resource) {
11.     TabBarItem({
12.       index: index,
13.       currentIndex: this.currentIndex,
14.       title: title,
15.       icon: icon,
16.       iconSelected: iconSelected
17.     })
18.   }
20.   build() {
21.     // 设置TabBar在主轴方向起始或结尾位置
22.     Tabs({ barPosition: this.currentBreakpoint === "lg" ? BarPosition.Start : BarPosition.End }) {
23.       // 首页
24.       TabContent() {
25.         Home()
26.       }.tabBar(this.tabItem(0, $r('app.string.tabBar1'), $r('app.media.ic_home_normal'), $r('app.media.ic_home_actived')))
27.       TabContent() {}.tabBar(this.tabItem(1, $r('app.string.tabBar2'), $r('app.media.ic_app_normal'), $r('app.media.ic_app_actived')))
28.       TabContent() {}.tabBar(this.tabItem(2, $r('app.string.tabBar3'), $r('app.media.ic_game_normal'), $r('app.media.ic_mine_actived')))
29.       TabContent() {}.tabBar(this.tabItem(3, $r('app.string.tabBar4'), $r('app.media.ic_search_normal'), $r('app.media.ic_search_actived')))
30.       TabContent() {}.tabBar(this.tabItem(4, $r('app.string.tabBar4'), $r('app.media.ic_mine_normal'), $r('app.media.ic_mine_actived')))
31.     }
32.     .backgroundColor('#F1F3F5')
33.     .barMode(BarMode.Fixed)
34.     .barWidth(this.currentBreakpoint === "lg" ? 96 : '100%')
35.     .barHeight(this.currentBreakpoint === "lg" ? '60%' : 56)
36.     // 设置TabBar放置在水平或垂直方向
37.     .vertical(this.currentBreakpoint === "lg")
38.   }
39. }

复制代码

别的在sm及lg断点下，TabBar中各个Item的图标和文字是按照垂直方向排布的，在md断点下，TabBar中各个Item的图标和文字是按照水平方向排布的。

1. @Component
2. export default struct TabBarItem {
3.   @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md';
5.   build() {
6.     if (this.currentBreakpoint !== 'md' ) {
7.       // sm及lg断点下，tabBarItem中的图标和文字垂直排布
8.       Column() {
9.        // ...
10.       }.justifyContent(FlexAlign.Center).height('100%').width('100%')
11.     } else {
12.       // md断点下，tabBarItem中的图标和文字水平排布
13.       Row() {
14.        // ...
15.       }.justifyContent(FlexAlign.Center).height('100%').width('100%')
16.     }
17.   }
18. }

复制代码

标题栏与搜索栏

标题栏和搜索栏，在sm和md断点下分两行显示，在lg断点下单行显示，可以通过栅格实现。在sm和md断点下，标题栏和搜索栏占满12列，此时会自动换行显示。在lg断点下，标题栏占8列而搜索栏占4列，此时标题栏和搜索栏在同一行中显示。

1. @Component
2. export default struct IndexHeader {
4.   @Builder searchBar() {
5.     Stack({alignContent: Alignment.End}) {
6.       TextInput({ placeholder: $r('app.string.search') })
7.         .placeholderColor('#FF000000')
8.         .placeholderFont({ size: 16, weight: 400 })
9.         .textAlign(TextAlign.Start)
10.         .caretColor('#FF000000')
11.         .width('100%')
12.         .height(40)
13.         .fontWeight(400)
14.         .padding({ top: 9, bottom: 9 })
15.         .fontSize(16)
16.         .backgroundColor(Color.White)
18.       Image($r('app.media.ic_public_search'))
19.         .width(16)
20.         .height(16)
21.         .margin({ right: 20 })
22.     }.height(56).width('100%')
23.   }
25.   @Builder titleBar() {
26.     Text($r('app.string.tabBar1'))
27.       .fontSize(24)
28.       .fontWeight(500)
29.       .fontColor('#18181A')
30.       .textAlign(TextAlign.Start)
31.       .height(56)
32.       .width('100%')
33.   }
35.   build() {
36.     // 借助栅格实现标题栏和搜索栏在不同断点下的不同布局效果。
37.     GridRow() {
38.       GridCol({ span: { xs: 12, lg: 8 } }) {
39.         this.titleBar()
40.       }
41.       GridCol({ span: { xs: 12, lg: 4 } }) {
42.         this.searchBar()
43.       }
44.     }
45.     .width('100%')
46.   }
47. }

复制代码

运营横幅

差别断点下的运营横幅，sm断点下显示一张图片，md断点下显示两张图片，lg断点下显示三张图片。可以通过 Swiper组件的displayCount属性 实现目标结果。

1. @Component
2. export default struct IndexSwiper {
3.   @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md';
4.   @Builder swiperItem(imageSrc:Resource) {
5.     Image(imageSrc)
6.       .width('100%')
7.       .aspectRatio(2.5)
8.       .objectFit(ImageFit.Fill)
9.   }
11.   build() {
12.     Swiper() {
13.       this.swiperItem($r('app.media.ic_public_swiper1'))
14.       this.swiperItem($r('app.media.ic_public_swiper2'))
15.       this.swiperItem($r('app.media.ic_public_swiper3'))
16.       // ...
17.     }
18.     .autoPlay(true)
19.     .indicator(false)
20.     .itemSpace(10)
21.     // 配置不同断点下运行横幅中展示的图片数量
22.     .displayCount(this.currentBreakpoint === 'sm' ? 1 : (this.currentBreakpoint === 'md' ? 2 : 3))
23.     .width('100%')
24.     .padding({ left: 12, right: 12, bottom: 16, top: 16 })
25.   }
26. }

复制代码

快捷入口

在差别的断点下，快捷入口的5个图标始终匀称排布，这是典范的均分能力使用场景。

1. import { entranceIcons } from '../model/HomeData';
2. import { AllIcons } from '../model/HomeDataType';
4. @Component
5. export default struct IndexEntrance {
6.   build() {
7.     // 将justifyContent参数配置为FlexAlign.SpaceEvenly实现均分布局
8.     Row() {
9.       ForEach(entranceIcons, (icon: AllIcons) => {
10.         // 各快捷入口的图标及名称
11.         Column() {
12.           // ...
13.           }
14.       })
15.     }
16.     .width('100%')
17.     .height(64)
18.     .justifyContent(FlexAlign.SpaceEvenly)
19.     .padding({ left: 12, right: 12 })
20.   }
21. }

复制代码

精品应用

随着可用显示区域的增加，精品应用中显示的图标数目也不断增加，这是典范的延伸能力使用场景。精品游戏的实现与精品应用类似，不再睁开分析。

1. import { AppItem, MyAppSource } from '../model/HomeDataType';
3. @Component
4. export default struct IndexApps {
5.   private title?: Resource;
6.   @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md';
7.   private apps: AppItem[] = [];
8.   @Builder
9.   appListHeader() {
10.     Row() {
11.       Text(this.title)
12.         .width(100)
13.         .fontSize(16)
14.         .textAlign(TextAlign.Start)
15.         .fontWeight(500)
16.       Blank()
17.       Text($r('app.string.more'))
18.         .fontSize(14)
19.         .textAlign(TextAlign.End)
20.         .fontWeight(400)
21.         .margin({ right: 2 })
22.       Image($r('app.media.ic_public_arrow_right'))
23.         .width(12)
24.         .height(18)
25.         .opacity(0.9)
26.         .objectFit(ImageFit.Fill)
27.     }
28.     .margin({ bottom: 9, top: 9 })
29.     .width('100%')
30.     .alignItems(VerticalAlign.Bottom)
31.   }
33.   @Builder
34.   appListItem(app:AppItem) {
35.     Column() {
36.       Image(app.image)
37.         .width(this.currentBreakpoint === 'lg' ? 80 : 56)
38.         .height(this.currentBreakpoint === 'lg' ? 80 : 56)
39.         .margin({ bottom: 8 })
40.       Text(app.title)
41.         .width(this.currentBreakpoint === 'lg' ? 80 : 56)
42.         .height(16)
43.         .fontSize(12)
44.         .textAlign(TextAlign.Center)
45.         .fontColor('#18181A')
46.         .margin({ bottom: 8 })
47.       Text($r('app.string.install'))
48.         .width(this.currentBreakpoint === 'lg' ? 80 : 56)
49.         .height(28)
50.         .fontColor('#0A59F7')
51.         .textAlign(TextAlign.Center)
52.         .borderRadius(this.currentBreakpoint === 'lg' ? 26 : 20)
53.         .fontWeight(500)
54.         .fontSize(12)
55.         .padding({ top: 6, bottom: 6, left: 8, right: 8 })
56.         .backgroundColor('rgba(0,0,0,0.05)')
57.     }
58.   }
59.   build() {
60.     Column() {
61.       this.appListHeader()
62.       // 借助List组件能力，实现延伸能力场景
63.       List({ space: this.currentBreakpoint === 'lg' ? 44 : 20}) {
64.         LazyForEach(new MyAppSource(this.apps), (app: AppItem)=> {
65.           ListItem() {
66.             // 每个应用的图标、名称及安装按钮
67.             this.appListItem(app)
68.           }
69.         })
70.       }
71.       .width('100%')
72.       .height(this.currentBreakpoint === 'lg' ? 140 : 120)
73.       .listDirection(Axis.Horizontal)
74.     }
75.     .width('100%')
76.     .height(this.currentBreakpoint === 'lg' ? 188 : 164)
77.     .padding({ bottom: 8, left: 12, right: 12 })
78.   }
79. }

复制代码

运行结果

将上述各页面主要部门组合在一起后，即可完成整体页面开发。

1. import IndexSwiper from './IndexSwiper';
2. import IndexEntrance from './IndexEntrance';
3. import IndexApps from './IndexApps';
4. import { appList, gameList } from '../model/HomeData';
5. import IndexHeader from './IndexHeader';
7. @Component
8. struct IndexContent {
9.   // ...
10.   build() {
11.     List() {
12.       // 运营横幅
13.       ListItem() {
14.         IndexSwiper()
15.       }
16.       // 快捷入口
17.       ListItem() {
18.         IndexEntrance()
19.       }
20.       // 精品应用
21.       ListItem() {
22.         IndexApps({ title: $r('app.string.boutique_application'), apps: appList })
23.       }
24.       // 精品游戏
25.       ListItem() {
26.         IndexApps({ title: $r('app.string.boutique_game'), apps: gameList })
27.       }
28.     }
29.     .width("100%")
30.   }
31. }
33. @Entry
34. @Component
35. export default struct Home {
36.   // ...
37.   build() {
38.     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start }) {
39.       // 标题栏和搜索栏
40.       IndexHeader()
41.       // 运营横幅、快捷入口、精品应用、精品游戏等
42.       IndexContent()
43.     }
44.     .height('100%')
45.     .backgroundColor("#F1F3F5")
46.   }
47. }

复制代码

本页面的实际运行结果如下图所示。

最后

小编也预备了一份联合鸿蒙官方发布条记整理收纳的《鸿蒙开发学习条记》，内容包含ArkTS、ArkUI、Web开发、应用模子、资源分类…等知识点。
【有需要的朋友，可以扫描下方二维码免费领取！！！】

《鸿蒙（HarmonyOS）开发学习指南》

第一章 快速入门
1、开发预备
2、构建第一个ArkTS应用（Stage模子）
3、构建第一个ArkTS应用（FA模子）
4、构建第一个JS应用（FA模子）
5、…

第二章 开发基础知识
1、应用步伐包基础知识
2、应用配置文件（Stage模子）
3、应用配置文件概述（FA模子）
4、…

第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目录和资源文件
3、 资源访问
4、…

第四章 学习ArkTs语言
1、初识ArkTS语言
2、根本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、…

第五章 UI开发
1.方舟开发框架（ArkUI）概述
2.基于ArkTS声明式开发范式
3.兼容JS的类Web开发范式
4…

第六章 Web开发
1.Web组件概述
2.使用Web组件加载页面
3.设置根本属性和事件
4.在应用中使用前端页面JavaScript
5.ArkTS语言基础类库概述
6.并发
7…

11.网络与毗连
12.电话服务
13.数据管理
14.文件管理
15.背景任务管理
16.设备管理
17…

第七章 应用模子
1.应用模子概述
2.Stage模子开发指导
3.FA模子开发指导
4…

扫描下方二维码免费领取，《鸿蒙（HarmonyOS）开发学习指南》

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。