devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS Codelab 优秀样例——购物应用，体验一次开发多端部署魅力_鸿蒙harmony简单应用-商品列表

作者：知新_RL | 2024-03-12 01:14:14

赞

踩

鸿蒙harmony简单应用-商品列表

一. 样例介绍

本篇Codelab基于自适应布局和响应式布局，实现购物应用在手机、折叠屏、平板不同屏幕尺寸设备上按不同设计显示。通过三层工程结构组织代码，实现一次开发，多端部署 。

手机运行效果如图所示：

4e6f0a2a88d74fd7ae145c2a4a4607a7.gif

 

折叠屏运行效果图：

88b602d13a3d4d77a85181845464b260.gif

 

平板运行效果图：

a0bf7d73d059445fad82661c691b0fcc.gif

相关概念

  • 一次开发，多端部署：一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用。
  • 自适应布局：当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种：拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。
  • 响应式布局：当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种：断点、媒体查询、栅格布局。
  • GridRow：栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。
  • GridCol：栅格子组件，必须作为栅格容器组件（GridRow）的子组件使用。

完整示例：gitee源码地址

 

二. 环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求

硬件要求

  • 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
  • HarmonyOS系统：3.1.0 Developer Release及以上版本。

环境搭建

  1. 安装DevEco Studio，详情请参考下载和安装软件。
  2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境： 
  • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
  • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  1. 开发者可以参考以下链接，完成设备调试的相关配置：

image.png

三.代码结构解读

本篇Codelab只对核心代码进行讲解，common为公共能力层，feature为功能模块层，本示例分为六个模块，product则为产品层。对于完整代码，我们会在源码下载或gitee中提供。

  1. ├──common/src/main/ets               // 公共能力层
  2. │  ├──bean
  3. │  │  ├──CommodityModel.ets          // 商品数据实体类
  4. │  │  ├──OrderModel.ets              // 订单数据实体类
  5. │  │  └──ProductModel.ets            // 购物车商品数据实体类
  6. │  ├──components
  7. │  │  ├──CommodityList.ets           // 商品列表组件
  8. │  │  ├──CounterProduct.ets          // 数量加减组件
  9. │  │  └──EmptyComponent.ets          // 无数据显示组件
  10. │  ├──constants
  11. │  │  ├──BreakpointConstants.ets     // 断点常量类
  12. │  │  ├──GridConstants.ets           // 栅格常量类
  13. │  │  └──StyleConstants.ets          // 样式常量类
  14. │  ├──utils
  15. │  │  ├──BreakpointSystem.ets        // 断点工具类
  16. │  │  ├──CommonDataSource.ets        // 数据封装类
  17. │  │  ├──LocalDataManager.ets        // 数据操作管理类
  18. │  │  ├──Logger.ets.ets              // 日志工具类
  19. │  │  └──Utils.ets                   // 方法工具类
  20. │  └──viewmodel
  21. │     └──ShopData.ets                // 商品应用数据
  22. ├──features                          // 功能模块层
  23. │  ├──commoditydetail/src/main/ets   // 商品详情内容区
  24. │  │  ├──bean
  25. │  │  │  └──TypeModel.ets            // 实体类
  26. │  │  ├──components
  27. │  │  │  ├──CapsuleGroupButton.ets   // 自定义按钮组件
  28. │  │  │  ├──CommodityDetail.ets      // 商品详情组件
  29. │  │  │  └──SpecificationDialog.ets  // 商品规格弹框
  30. │  │  ├──constants
  31. │  │  │  └──CommodityConstants.ets   // 商品详情区常量类
  32. │  │  └──viewmodel
  33. │  │     └──CommodityDetailData.ets  // 商品详情数据类
  34. │  ├──home/src/main/ets              // 首页内容区
  35. │  │  ├──components
  36. │  │  │  └──Home.ets                 // 首页内容组件
  37. │  │  └──viewmodel
  38. │  │     └──HomeData.ets             // 首页数据
  39. │  ├──newproduct/src/main/ets        // 新品内容区
  40. │  │  ├──components
  41. │  │  │  └──NewProduct.ets           // 新品内容组件
  42. │  │  └──viewmodel
  43. │  │     └──NewProductData.ets       // 新品数据
  44. │  ├──orderdetail/src/main/ets       // 订单相关内容区
  45. │  │  ├──components
  46. │  │  │  ├──AddressInfo.ets          // 收件人信息组件
  47. │  │  │  ├──CommodityOrderItem.ets   // 商品订单信息组件
  48. │  │  │  ├──CommodityOrderList.ets   // 商品订单列表组件
  49. │  │  │  ├──ConfirmOrder.ets         // 确认订单组件
  50. │  │  │  ├──HeaderBar.ets            // 标题组件
  51. │  │  │  ├──OrderDetailList.ets      // 订单分类列表组件
  52. │  │  │  ├──OrderListContent.ets     // 订单分类列表内容组件
  53. │  │  │  └──PayOrder.ets             // 支付订单组件
  54. │  │  ├──constants
  55. │  │  │  └──OrderDetailConstants.ets // 订单区常量类
  56. │  │  └──viewmodel
  57. │  │     └──OrderData.ets            // 订单数据
  58. │  ├──personal/src/main/ets          // 我的内容区
  59. │  │  ├──bean
  60. │  │  │  └──IconButtonModel.ets      // 按钮图标实体类
  61. │  │  ├──components
  62. │  │  │  ├──IconButton.ets           // 图片按钮组件
  63. │  │  │  ├──LiveList.ets             // 直播列表组件
  64. │  │  │  └──Personal.ets             // 我的内容组件
  65. │  │  ├──constants
  66. │  │  │  └──PersonalConstants.ets    // 我的常量类
  67. │  │  └──viewmodel
  68. │  │     └──PersonalData.ets         // 我的数据
  69. │  └──shopcart/src/main/ets          // 购物车内容区
  70. │     ├──components
  71. │     │  └──ShopCart.ets             // 购物车内容组件
  72. │     └──constants
  73. │        └──ShopCartConstants.ets    // 购物车常量类
  74. └──products                          // 产品层
  75.    └──phone/src/main/ets             // 支持手机、平板
  76.       ├──constants
  77.       │  └──PageConstants.ets        // 页面常量类
  78.       ├──entryability
  79.       │  └──EntryAbility.ets          // 程序入口类
  80.       ├──pages
  81.       │  ├──CommodityDetailPage.ets  // 订单详情页
  82.       │  ├──ConfirmOrderPage.ets     // 确认订单页
  83.       │  ├──MainPage.ets             // 主页
  84.       │  ├──OrderDetailListPage.ets  // 订单分类列表页
  85.       │  ├──PayOrderPage.ets         // 支付订单页
  86.       │  └──SplashPage.ets           // 启动过渡页
  87.       └──viewmodel
  88.          └──MainPageData.ets         // 主页数据
复制

四. 应用主框架

4.1 启动页

在工程pages目录中，选中Index.ets，点击鼠标右键 > Refactor > Rename，改名为SplashPage.ets。改名后，修改工程entryability目录下EntryAbility.ets文件中windowStage.loadContent方法第一个参数为pages/SplashPage。在该页面的周期函数aboutToAppear里添加一个2秒的定时任务跳转到主页实现。

  1. // EntryAbility.ets
  2. windowStage.loadContent('pages/SplashPage', (err, data) => {
  3.   if (err.code) {
  4.     ...
  5.   }
  6. });
  7.  
  8. // SplashPage.ets
  9. build() {
  10.   Column() {
  11.     ...
  12.   }
  13.   .height(StyleConstants.FULL_HEIGHT)
  14.   .width(StyleConstants.FULL_WIDTH)
  15.   .backgroundColor($r('app.color.page_background'))
  16. }
  17.  
  18. aboutToAppear() {
  19.   this.breakpointSystem.register();
  20.   this.timeOutId = setTimeout(() => {
  21.     router.replaceUrl({ url: PageConstants.MAIN_PAGE_URL })
  22.       .catch(err => {
  23.         Logger.error(JSON.stringify(err));
  24.       })
  25.   }, PageConstants.DELAY_TIME);
  26. }
  27.  
  28. aboutToDisappear() {
  29.   this.breakpointSystem.unregister();
  30.   clearTimeout(this.timeOutId);
  31. }
复制

手机运行效果图：

cke_50995.png

 

折叠屏运行效果图：

cke_60722.png

 

平板运行效果图：

cke_70606.png

 

4.2 主页

本篇Codelab主页由Tabs容器组件和四个TabContent子组件组成，四个TabContent页签的内容视图分别为首页（Home）、新品（NewProduct）、购物车（ShopCart）、我的（Personal）。根据用户使用场景，通过响应式布局的媒体查询，监听应用窗口宽度变化，获取当前应用所处的断点值，设置Tabs的页签位置，lg断点如平板则显示侧边栏，其他断点的则显示底部栏。

  1. /// MainPage.ets
  2. build() {
  3.   Column() {
  4.     Tabs({
  5.       barPosition: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
  6.         BarPosition.Start : BarPosition.End,
  7.       index: this.currentPageIndex
  8.     }) {       
  9.     ...  
  10.     .barWidth(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
  11.       $r('app.float.bar_width') : StyleConstants.FULL_WIDTH)
  12.     .barHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
  13.       StyleConstants.SIXTY_HEIGHT : $r('app.float.vp_fifty_six'))
  14.     .vertical(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG)
  15.   }
  16.   .backgroundColor($r('app.color.page_background'))
  17. }
复制

主页页面展示：

image.png

五. 页面介绍

5.1 首页标签页

首页标签页通过自适应布局的均分、拉伸等能力实现搜索框、分类等布局，通过响应式布局的媒体查询、断点能力设置轮播图数、商品列表数。

通过响应式布局的媒体查询，监听应用窗口宽度变化，获取当前应用所处的断点值，设置商品列表列数和轮播图数，lg断点显示4列3张轮播图，md断点显示3列2张轮播图，sm断点显示2列1张轮播图。

  1. // Home.ets
  2. @Builder CustomSwiper() {
  3.   Swiper() {
  4.     ForEach(swiperImage, (item: Resource) => {
  5.       Image(item)
  6.         .width(StyleConstants.FULL_WIDTH)
  7.         .aspectRatio(StyleConstants.IMAGE_ASPECT_RATIO)
  8.     }, item => JSON.stringify(item))
  9.   }
  10.   .itemSpace(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 0 :
  11.     StyleConstants.ITEM_SPACE)
  12.   .indicator(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM)
  13.   .displayCount(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
  14.     StyleConstants.DISPLAY_THREE :
  15.     (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? StyleConstants.DISPLAY_TWO :
  16.     StyleConstants.DISPLAY_ONE))
  17. }
  18.  
  19. // Home.ets
  20. CommodityList({
  21.   commodityList: $commodityList,
  22.   column: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? StyleConstants.DISPLAY_FOUR :
  23.     (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ?
  24.     StyleConstants.DISPLAY_THREE : StyleConstants.DISPLAY_TWO),
  25.   onClickItem: (data: Commodity) => this.onClickItem(data)
  26. })
  27.  
  28. // CommodityList.ets
  29. build() {
  30.   if (this.commodityList.length > 0) {
  31.     List({ space: StyleConstants.TWELVE_SPACE }) {
  32.       LazyForEach(new CommonDataSource(this.commodityList), (item: Commodity) => {
  33.         ...
  34.       }, item => JSON.stringify(item))
  35.     }
  36.     ...
  37.     .lanes(this.column)
  38.   } else {
  39.     EmptyComponent({ outerHeight: StyleConstants.FIFTY_HEIGHT })
  40.   }
  41. }
复制

使用自适应布局的均分能力，在Flex布局中设置主轴上的对齐方式为FlexAlign.SpaceAround，使循环渲染的组件之间距离相同，第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

  1. // Home.ets
  2. @Builder ActivityTitle() {
  3.   Flex({ justifyContent: FlexAlign.SpaceAround }) {
  4.     ForEach(activityTitle, (item: ActivityTitleModel, index: number) => {
  5.       Flex({
  6.         direction: FlexDirection.Column,
  7.         justifyContent: FlexAlign.Center,
  8.         alignItems: ItemAlign.Center
  9.       }) {
  10.         ...
  11.       }
  12.     }, item => JSON.stringify(item))
  13.   }
  14.   ...
  15. }
复制

手机运行效果图：

cke_125550.png

 

折叠屏运行效果图：

cke_147650.png

 

平板运行效果图：

cke_171046.png

 

5.2 新品标签页

新品标签页由轮播图、分类、新品列表组成，通过响应式布局的媒体查询、断点能力和自适应布局的均分能力，实现不同设备类型显示不同效果，实现逻辑同主页。

通过响应式布局的媒体查询，监听应用窗口宽度变化，获取当前应用所处的断点值设置新品列表，sm断点显示2列，md、lg断点显示3列。

  1. // NewProduct.ets
  2. @Builder ProductList() {
  3.   List({ space: StyleConstants.TWELVE_SPACE }) {
  4.     LazyForEach(new CommonDataSource(productData), (item: ProductDataModel) => {
  5.       ListItem() {
  6.         ...
  7.     }, item => JSON.stringify(item))
  8.   }
  9.   .lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
  10.     StyleConstants.DISPLAY_TWO : StyleConstants.DISPLAY_THREE)
  11.   .padding({ left: $r('app.float.vp_twelve'), right: $r('app.float.vp_twelve') })
  12. }
复制

手机运行效果图：

cke_205565.png

折叠屏运行效果图：

cke_229439.png

平板运行效果图：

image.png

 

5.3 购物车标签页

购物车标签页，由购物车列表和商品列表组成，商品列表实现逻辑同主页的商品列表，购物车列表使用自适应布局的均分能力实现。

  1. // ShopCart.ets
  2. @Builder CartItem(item: Product, index: number) {
  3.   Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  4.     ...
  5.     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceAround }) {
  6.       Text($r('app.string.commodity_piece_description', item.name, item.description))
  7.         ...
  8.       Text(`${Object.values(item.specifications).join('，')}`)
  9.         ...
  10.       Flex({ justifyContent: FlexAlign.SpaceBetween }) {
  11.         Text() {
  12.           ...
  13.         }
  14.  
  15.         CounterProduct({
  16.           count: item.count,
  17.           onNumberChange: (num: number) => {
  18.             this.onChangeCount(num, item);
  19.           }
  20.         })
  21.       }
  22.     }
  23.     ...
  24.   }
  25. }
复制

手机运行效果图：

cke_282919.png

折叠屏运行效果图：

cke_305205.png

 

平板运行效果图：

image.png

 

5.4 我的标签页

我的标签页主要由个人信息、我的订单、文字图片按钮、直播列表组成，直播列表实现方案同主页商品列表，其他则使用自适应布局的均分能力，Flex布局设置主轴上的对齐方式为FlexAlign.SpaceAround。

  1. // Personal.ets
  2. @Builder Order() {
  3.   Flex({direction: FlexDirection.Column}) {
  4.     Flex({
  5.       justifyContent: FlexAlign.SpaceBetween,
  6.       alignItems: ItemAlign.Center
  7.     }) {
  8.       Text($r('app.string.order_mine'))
  9.         .fontSize($r('app.float.middle_font_size'))
  10.       Row() {
  11.         ...
  12.       }
  13.       ...
  14.       })
  15.     }
  16.   Flex({
  17.     justifyContent: FlexAlign.SpaceAround,
  18.     alignItems: ItemAlign.Center
  19.   }) {
  20.     ForEach(this.orderIconButton, (iconButton: IconButtonModel) => {
  21.       IconButton({
  22.         props: iconButton,
  23.         click: this.onOrderButtonClick.bind(this, iconButton.key)
  24.       })
  25.     }, (iconButton) => JSON.stringify(iconButton))
  26.   }
  27.   .width(StyleConstants.FULL_WIDTH)
  28. }
  29.  
  30. @Builder IconDock(buttons: IconButtonModel[]) {
  31.   Flex({
  32.     justifyContent: FlexAlign.SpaceAround,
  33.     alignItems: ItemAlign.Center
  34.   }) {
  35.     ForEach(buttons, (iconButton: IconButtonModel) => {
  36.       IconButton({
  37.         props: iconButton
  38.       })
  39.     }, (iconButton) => JSON.stringify(iconButton))
  40.   }
  41.   .height($r('app.float.icon_dock_height'))
  42.   .padding($r('app.float.vp_twelve'))
  43.   .cardStyle()
  44. }
复制

手机运行效果图：

cke_358702.png

 

折叠屏运行效果图：

cke_375665.png

 

平板运行效果图：

image.png

 

5.5 商品详情页

商品详情页整体由轮播图、商品信息、底部按钮栏组成，通过响应式布局能力的栅格布局，实现不同设备类型显示不同的效果，并通过自适应布局的拉伸能力，设置flexGrow属性使按钮位于底部。

  • 在sm断点下，轮播图占4个栅格，商品信息占4个栅格，底部按钮栏占4个栅格。
  • 在md断点下，轮播图占8个栅格，商品信息占8个栅格，底部按钮栏占8个栅格。
  • 在lg断点下，轮播图占12个栅格，商品信息占8个栅格偏移2个栅格，底部按钮栏占8个栅格偏移2个栅格。
  1. // CommodityDetail.ets
  2. build() {
  3.   Stack({ alignContent: Alignment.TopStart }) {
  4.     Flex({ direction: FlexDirection.Column }) {
  5.       Scroll() {
  6.         GridRow({
  7.           columns: {
  8.             sm: GridConstants.COLUMN_FOUR,
  9.             md: GridConstants.COLUMN_EIGHT,
  10.             lg: GridConstants.COLUMN_TWELVE
  11.           },
  12.           gutter: GridConstants.GUTTER_TWELVE
  13.         }) {
  14.           GridCol({
  15.             span: {
  16.               sm: GridConstants.SPAN_FOUR,
  17.               md: GridConstants.SPAN_EIGHT,
  18.               lg: GridConstants.SPAN_TWELVE }
  19.           }) {
  20.             this.CustomSwiper(this.info.images)
  21.           }
  22.           GridCol({
  23.             span: {
  24.               sm: GridConstants.SPAN_FOUR,
  25.               md: GridConstants.SPAN_EIGHT,
  26.               lg: GridConstants.SPAN_EIGHT
  27.             },
  28.             offset: { lg: GridConstants.OFFSET_TWO }
  29.           }) {
  30.             Column() {
  31.               ...
  32.             }
  33.           }
  34.         }
  35.       }
  36.       .flexGrow(StyleConstants.FLEX_GROW)
  37.       GridRow({
  38.         columns: {
  39.           sm: GridConstants.COLUMN_FOUR,
  40.           md: GridConstants.COLUMN_EIGHT,
  41.           lg: GridConstants.COLUMN_TWELVE
  42.         },
  43.         gutter: GridConstants.GUTTER_TWELVE
  44.       }) {
  45.         GridCol({
  46.           span: {
  47.             sm: GridConstants.SPAN_FOUR,
  48.             md: GridConstants.SPAN_EIGHT,
  49.             lg: GridConstants.SPAN_EIGHT
  50.           },
  51.           offset: { lg: GridConstants.OFFSET_TWO } }) {
  52.           this.BottomMenu()
  53.         }
  54.       }
  55.     }
  56.     ...
  57.   }
  58. }
复制

手机运行效果图：

image.png

 

折叠屏运行效果图：

image.png

 

平板运行效果图：

image.png

 

5.6 订单确认页

订单确认页由上方收件信息、订单信息、底部的总价和提交订单按钮组成，通过响应式布局的栅格布局，实现不同设备类型显示不同的效果，并通过自适应布局的拉伸能力，设置flexGrow属性使总价和提交订单按钮位于底部。

  • 在sm断点下，上方收件信息和订单信息占4个栅格，底部总价占2个栅格，底部提交订单按钮占2个栅格。
  • 在md断点下，上方收件信息和订单信息占8个栅格，底部总价占2个栅格，底部按钮占3个栅格偏移3个栅格。
  • 在lg断点下，上方收件信息和订单信息占8个栅格偏移2个栅格，底部总价占2个栅格偏移2个栅格，底部按钮占3个栅格偏移3个栅格。
  1. // ConfirmOrder.ets
  2. build() {
  3.   Flex({ direction: FlexDirection.Column }) {
  4.     HeaderBar({
  5.       ...
  6.     })
  7.     Column(){
  8.       Scroll() {
  9.         GridRow({
  10.           columns: {
  11.             sm: GridConstants.COLUMN_FOUR,
  12.             md: GridConstants.COLUMN_EIGHT,
  13.             lg: GridConstants.COLUMN_TWELVE
  14.             }
  15.           }) {
  16.           GridCol({
  17.             span: {
  18.               sm: GridConstants.SPAN_FOUR,
  19.               md: GridConstants.SPAN_EIGHT,
  20.               lg: GridConstants.SPAN_EIGHT
  21.             },
  22.             offset: { lg: GridConstants.OFFSET_TWO }
  23.           }) {
  24.             Column() {
  25.               AddressInfo()
  26.               CommodityOrderList()
  27.             }
  28.           }
  29.         }
  30.       }
  31.       .scrollBar(BarState.Off)
  32.     }
  33.     .flexGrow(StyleConstants.FLEX_GROW)
  34.     .padding({ left: $r('app.float.vp_twelve'), right: $r('app.float.vp_twelve') })
  35.     GridRow({
  36.       columns: {
  37.         sm: GridConstants.COLUMN_FOUR,
  38.         md: GridConstants.COLUMN_EIGHT,
  39.         lg: GridConstants.COLUMN_TWELVE
  40.       },
  41.       gutter: GridConstants.GUTTER_TWELVE
  42.     }) {
  43.       GridCol({
  44.         span: {
  45.           sm: GridConstants.SPAN_TWO,
  46.           md: GridConstants.SPAN_TWO,
  47.           lg: GridConstants.SPAN_TWO
  48.         },
  49.         offset: { lg: GridConstants.OFFSET_TWO }
  50.       }) {
  51.         Text($r('app.string.bottom_bar_amount', this.amount))
  52.         ...
  53.       }
  54.       GridCol({
  55.         span: {
  56.           sm: GridConstants.SPAN_TWO,
  57.           md: GridConstants.SPAN_THREE,
  58.           lg: GridConstants.SPAN_THREE
  59.         },
  60.         offset: {
  61.           md: GridConstants.OFFSET_THREE,
  62.           lg: GridConstants.OFFSET_THREE
  63.         }
  64.       }) {
  65.         Button($r('app.string.bottom_bar_button'))
  66.           ...
  67.       }
  68.     }
  69.     ...
  70.   }
  71.   ...
  72. }
复制

手机运行效果图：

image.png

 

折叠屏运行效果图：

image.png

 

平板运行效果图：

image.png

 

5.7 订单支付页

订单支付页整体由上方订单信息和底部的去支付按钮组成，通过使用响应式布局的栅格布局实现不同设备类型显示不同效果，并通过自适应布局的拉伸能力，设置flexGrow属性使去支付按钮位于底部。

  • 在sm断点下，上方订单信息占4个栅格，底部去支付按钮占2个栅格偏移2个栅格。
  • 在md断点下，上方订单信息占8个栅格，底部去支付按钮占2个栅格偏移6个栅格。
  • 在lg断点下，上方订单信息占8个栅格偏移2个栅格，底部去支付按钮占2个栅格偏移8个栅格。
  1. // PayOrder.ets
  2. build() {
  3.   Flex({ direction: FlexDirection.Column }) {
  4.     HeaderBar({
  5.       ...
  6.     })
  7.     Stack({ alignContent: Alignment.TopStart }) {
  8.       ...
  9.       Column() {
  10.         Scroll() {
  11.           GridRow({
  12.             columns: {
  13.               sm: GridConstants.COLUMN_FOUR,
  14.               md: GridConstants.COLUMN_EIGHT,
  15.               lg: GridConstants.COLUMN_TWELVE
  16.             }
  17.           }) {
  18.             GridCol({
  19.               span: {
  20.                 sm: GridConstants.SPAN_FOUR,
  21.                 md: GridConstants.SPAN_EIGHT,
  22.                 lg: GridConstants.SPAN_EIGHT
  23.               },
  24.               offset: { lg: GridConstants.OFFSET_TWO }
  25.             }) {
  26.               Column() {
  27.                 this.OrderStatus()
  28.                 ...
  29.               }
  30.             }
  31.           }
  32.         }
  33.         .scrollBar(BarState.Off)
  34.       }
  35.       .padding({ left: $r('app.float.vp_twelve'), right: $r('app.float.vp_twelve') })
  36.     }
  37.     .flexGrow(StyleConstants.FLEX_GROW)
  38.  
  39.     GridRow({
  40.       columns: {
  41.         sm: GridConstants.COLUMN_FOUR,
  42.         md: GridConstants.COLUMN_EIGHT,
  43.         lg: GridConstants.COLUMN_TWELVE
  44.       }
  45.     }) {
  46.       GridCol({
  47.         span: {
  48.           sm: GridConstants.SPAN_TWO,
  49.           md: GridConstants.SPAN_TWO,
  50.           lg: GridConstants.SPAN_TWO
  51.         },
  52.         offset: {
  53.           sm: GridConstants.OFFSET_TWO,
  54.           md: GridConstants.OFFSET_SIX,
  55.           lg: GridConstants.OFFSET_EIGHT
  56.         }
  57.       }) {
  58.         this.BottomBar()
  59.       }
  60.     }
  61.   }
  62.   ...
  63. }
复制

手机运行效果图：

image.png

 

折叠屏运行效果图：

image.png

 

平板运行效果图：

image.png

 

5.8 订单列表页

订单列表页整体布局通过响应式布局的栅格布局，实现不同设备类型显示不同的效果。

  • 在sm断点下，整体UX占4个栅格。
  • 在md断点下，整体UX占8个栅格。
  • 在lg断点下，整体UX占8个栅格偏移2个栅格。
  1. // OrderListContent.ets
  2. build() {
  3.   Column() {
  4.     Scroll() {
  5.       GridRow({
  6.         columns: {
  7.           sm: GridConstants.COLUMN_FOUR,
  8.           md: GridConstants.COLUMN_EIGHT,
  9.           lg: GridConstants.COLUMN_TWELVE
  10.         }
  11.       }) {
  12.         GridCol({
  13.           span: {
  14.             sm: GridConstants.SPAN_FOUR,
  15.             md: GridConstants.SPAN_EIGHT,
  16.             lg: GridConstants.SPAN_EIGHT
  17.           },
  18.           offset: { lg: GridConstants.OFFSET_TWO }
  19.         }) {
  20.           Column() {
  21.             ...
  22.           }
  23.         }
  24.       }
  25.     }
  26.     .scrollBar(BarState.Off)
  27.   }
  28.   ...
  29. }
复制

手机运行效果图：

image.png

 

折叠屏运行效果图：

image.png

 

平板运行效果图：

image.png

 

六.  总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

  1. 针对不同屏幕尺寸的设备完成一次开发，多端部署页面设计。
  2. 按照三层工程结构划分模块、组织代码。
  3. 通过自适应布局、响应式布局、栅格布局实现一次开发，多端部署。

 

点击进入华为官网，解锁更多精彩内容 

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号