鸿蒙OS开发：【一次开发，多端部署】（app市场首页）项目

一多应用市场首页

介绍

本示例展示了应用市场首页，页面中包括Tab栏、运营横幅、精品应用、精品游戏等。

本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备（或多窗口尺寸）适配，保证应用在不同设备或不同窗口尺寸下可以正常显示。

用到了媒体查询接口[@ohos.mediaquery]

效果预览

本示例在预览器中的效果：

image.png

本示例在开发板上运行的效果：

image.png

使用说明：

  1. 启动应用，可以查看本应用在全屏状态下的显示效果。
  2. 在应用顶部，下滑出现窗口操作按钮。（建议通过外接鼠标操作，接入鼠标只需要将鼠标移动至顶部即可出现窗口）
  3. 点击悬浮图标，将应用悬浮在其它界面上显示。
  4. 拖动应用悬浮窗口的边框，改变窗口尺寸，触发应用刷新，即可查看应用在不同窗口下的显示效果。
  5. 改变窗口尺寸的过程中，窗口尺寸可能超出屏幕尺寸。此时在屏幕中只能看到应用部分区域的显示，但可以通过移动窗口位置，查看应用其它区域的显示。
  6. 开发前请熟悉鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

工程目录

AppMarket/entry/src/main/ets/
|---model
|   |---HomeData.ets                       // 主页用到的图片资源
|   |---HomeDataType.ets                   // 事件监听函数
|---pages                                  
|   |---index.ets                          // 首页
|---common                                    
|   |---BreakpointSystem.ets               // 媒体查询
|   |---Home.ets                           // 主容器
|   |---IndexApps.ets                      // app模块(包含安装，展示图片，更多功能)
|   |---IndexContent.ets                   // 内容模块
|   |---IndexEntrance.ets                  // 下一步模块(箭头跳转组件)
|   |---IndexHeader.ets                    // 头部组件
|   |---IndexSwiper.ets                    // 轮播图   
|   |---TabBarItem.ets                     // 导航栏

具体实现

本示例介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口，将页面分拆为5个部分。

底部/侧边导航栏

1、在sm和md断点下，导航栏在底部；在lg断点下，导航栏在左侧。
2、通过Tab组件的barPosition和vertical属性控制TabBar的位置在主轴方向起始或结尾位置和水平或垂直方向，同时还可以通过barWidth和barHeight属性控制TabBar的尺寸，[源码参考]。

/*

 * Copyright (c) 2022 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



import Home from '../common/Home'

import TabBarItem from '../common/TabBarItem'

import BreakpointSystem from '../common/BreakpointSystem'



@Entry

@Component

struct Index {

  @State currentIndex: number = 0

  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md'

  private breakpointSystem: BreakpointSystem = new BreakpointSystem()

  private onTabChange = (index: number) => {

    this.currentIndex = index

  }



  aboutToAppear() {

    this.breakpointSystem.register()

  }



  aboutToDisappear() {

    this.breakpointSystem.unregister()

  }



  @Builder

  tabItem(index: number, title: Resource, icon: Resource, iconSelected: Resource) {

    TabBarItem({

      index: index,

      currentIndex: this.currentIndex,

      title: title,

      icon: icon,

      iconSelected: iconSelected

    })

  }



  build() {

    Tabs({ barPosition: this.currentBreakpoint === 'lg' ? BarPosition.Start : BarPosition.End }) {

      TabContent() {

        Home()

      }

      .tabBar(this.tabItem(0, $r('app.string.tabBar1'), $r('app.media.ic_home_normal'), $r('app.media.ic_home_actived')))



      TabContent() {

      }

      .tabBar(this.tabItem(1, $r('app.string.tabBar2'), $r('app.media.ic_app_normal'), $r('app.media.ic_app_actived')))



      TabContent() {

      }

      .tabBar(this.tabItem(2, $r('app.string.tabBar3'), $r('app.media.ic_game_normal'), $r('app.media.ic_mine_actived')))



      TabContent() {

      }

      .tabBar(this.tabItem(3, $r('app.string.tabBar4'), $r('app.media.ic_search_normal'), $r('app.media.ic_search_actived')))



      TabContent() {

      }

      .tabBar(this.tabItem(4, $r('app.string.tabBar4'), $r('app.media.ic_mine_normal'), $r('app.media.ic_mine_actived')))

    }

    .barWidth(this.currentBreakpoint === 'lg' ? 96 : '100%')

    .barHeight(this.currentBreakpoint === 'lg' ? '60%' : 56)

    .vertical(this.currentBreakpoint === 'lg')

    .onChange(this.onTabChange)

    .backgroundColor('#F1F3F5')

  }

}
标题栏与搜索栏

通过栅格实现标题栏和搜索栏：在sm和md断点下分两行显示，在lg断点下单行显示，[源码参考]。

/*

 * Copyright (c) 2022 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



@Component

export default struct IndexHeader {

  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md'



  @Builder searchBar() {

    Stack({alignContent: Alignment.End}) {

      TextInput({ placeholder: $r('app.string.search') })

        .placeholderColor('#FF000000')

        .placeholderFont({ size: 16, weight: 400 })

        .textAlign(TextAlign.Start)

        .caretColor('#FF000000')

        .width('100%')

        .height(40)

        .fontWeight(400)

        .padding({ top: 9, bottom: 9 })

        .fontSize(16)

        .backgroundColor(Color.White)



      Image($r('app.media.ic_public_search'))

        .width(16)

        .height(16)

        .margin({ right: 20 })

    }.height(56).width('100%')

  }



  @Builder titleBar() {

    Text($r('app.string.tabBar1'))

      .fontSize(24)

      .fontWeight(500)

      .fontColor('#18181A')

      .textAlign(TextAlign.Start)

      .height(56)

      .width('100%')

  }



  build() {

    GridRow() {

      GridCol({ span: { xs: 12, lg: 8 } }) {

        this.titleBar()

      }

      GridCol({ span: { xs: 12, lg: 4 } }) {

        this.searchBar()

      }

    }

    .width('100%')

    .height(this.currentBreakpoint === 'lg' ? 56 : 112)

    .padding({ left: 12, right: 12 })

  }

}

2、在sm和md断点下，标题栏和搜索栏占满12列，此时会自动换行显示。
3、在lg断点下，标题栏占8列而搜索栏占4列，此时标题栏和搜索栏在同一行中显示。

运营横幅

实现不同断点下的运营横幅：通过Swiper组件的displayCount属性，sm断点下显示一张图片，md断点下显示两张图片，lg断点下显示三张图片。

快捷入口

通过将justifyContent参数配置为FlexAlign.SpaceEvenly实现均分布局：在不同的断点下，快捷入口的5个图标始终均匀排布。

精品应用

通过List组件能力，实现延伸能力场景：随着可用显示区域的增加，精品应用中显示的图标数量也不断增加，[源码参考]。

/*

 * Copyright (c) 2022-2023 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



import { AppItem, MyAppSource } from '../model/HomeDataType'



@Component

export default struct IndexApps {

  private title: Resource

  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md'

  private apps: AppItem[] = []



  @Builder

  appListHeader() {

    Row() {

      Text(this.title)

        .width(100)

        .fontSize(16)

        .textAlign(TextAlign.Start)

        .fontWeight(500)

      Blank()

      Text($r('app.string.more'))

        .fontSize(14)

        .textAlign(TextAlign.End)

        .fontWeight(400)

        .margin({ right: 2 })

      Image($r('app.media.ic_public_arrow_right'))

        .width(12)

        .height(18)

        .opacity(0.9)

        .objectFit(ImageFit.Fill)

    }

    .margin({ bottom: 9, top: 9 })

    .width('100%')

    .alignItems(VerticalAlign.Bottom)

  }



  @Builder

  appListItem(app:AppItem) {

    Column() {

      Image(app.image)

        .width(this.currentBreakpoint === 'lg' ? 80 : 56)

        .height(this.currentBreakpoint === 'lg' ? 80 : 56)

        .margin({ bottom: 8 })

      Text(app.title)

        .width(this.currentBreakpoint === 'lg' ? 80 : 56)

        .height(16)

        .fontSize(12)

        .textAlign(TextAlign.Center)

        .fontColor('#18181A')

        .margin({ bottom: 8 })

      Text($r('app.string.install'))

        .width(this.currentBreakpoint === 'lg' ? 80 : 56)

        .height(28)

        .fontColor('#0A59F7')

        .textAlign(TextAlign.Center)

        .borderRadius(this.currentBreakpoint === 'lg' ? 26 : 20)

        .fontWeight(500)

        .fontSize(12)

        .padding({ top: 6, bottom: 6, left: 8, right: 8 })

        .backgroundColor('rgba(0,0,0,0.05)')

    }

  }





  build() {

    Column() {

      this.appListHeader()

      List({ space: this.currentBreakpoint === 'lg' ? 44 : 20}) {

        LazyForEach(new MyAppSource(this.apps), app => {

          ListItem() {

            this.appListItem(app)

          }

        }, app => app.id)

      }

      .width('100%')

      .height(this.currentBreakpoint === 'lg' ? 140 : 120)

      .listDirection(Axis.Horizontal)

    }

    .width('100%')

    .height(this.currentBreakpoint === 'lg' ? 188 : 164)

    .padding({ bottom: 8, left: 12, right: 12 })

  }

}

`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

搜狗高速浏览器截图20240326151450.png

总体运行效果

通过将上述各页面在List() {}中引用组件后，可实现首页的组件整合渲染，即可完成整体页面开发。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/656866.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

海外仓系统哪家好？闭坑指南，擦亮眼睛选对系统

海外仓系统哪家好？闭坑指南，擦亮眼睛选对系统

可以说现在的海外仓系统市场还是比较杂乱的，各种不同类型，不同收费标准的系统比比皆是，这让很多想引进海外仓系统的企业不知所措，不知道怎么选。 今天就聊一下在选择海外仓系统的时候应该如何考量，才能避免被坑&#…
阅读更多...
告别红色波浪线：tsconfig.json 配置详解

告别红色波浪线：tsconfig.json 配置详解

使用PC端的朋友，请将页面缩小到最小比例，阅读最佳！ tsconfig.json 文件用于配置 TypeScript 项目的编译选项。如果配不对，就会在项目中显示一波又一波的红色波浪线，警告你这些地方的类型声明存在问题。 一般我们遇到这…
阅读更多...
社会工程学：美色你顶得住吗？

社会工程学：美色你顶得住吗？

背景 近年来，网络钓鱼的手段是屡见不鲜，手段和方式也是层出不穷。钓鱼相关的技术作为一种比较高效的打点方式，越来越多的应用于红蓝对抗当中。本文主要分享一次实战攻防中几个有趣的钓鱼场景。 重点说明：本文分享内容为一次经过授…
阅读更多...
【UE5.1 角色练习】06-角色发射火球-part2

【UE5.1 角色练习】06-角色发射火球-part2

目录 效果 步骤 一、火球生命周期 二、添加可被伤害的NPC 三、添加冲量 在上一篇（【UE5.1 角色练习】06-角色发射火球-part1）基础上继续实现角色发射火球相关功能 效果 步骤 一、火球生命周期 为了防止火球没有命中任何物体而一直移动下去&#…
阅读更多...
【软考】下篇 第12章 信息系统架构设计理论与实践

【软考】下篇 第12章 信息系统架构设计理论与实践

目录 一、信息系统架构的定义二、信息系统架构风格三、信息系统架构分类四、信息系统常用的4种架构模型（SCSB）五、企业信息系统的总体框架ISA六、TOGAF & ADM七、信息化总体架构方法信息化六要素信息化架构模式信息系统生命周期（规分设实…
阅读更多...
JS中运算符详解

JS中运算符详解

一：赋值运算符 1 类型 、、-、*、/等 2 如何运行 ，是将等号右边的数赋值给左边以为例，let num 5；num2等价于numnum2 二：一元运算符 1 自增运算符 什么是一元运算符 只需要一个操作数就可以运算的运算符 &#x…
阅读更多...
AIGC行业的发展前景与市场需求

AIGC行业的发展前景与市场需求

简介：探讨当前时机是否适合进入AIGC行业，考虑行业发展阶段和市场需求。 方向一：行业前景 AIGC（人工智能生成内容）行业是近年来随着人工智能技术的快速发展而兴起的一个新兴领域，它涉及到使用人工智能技术来…
阅读更多...
Git——pull request详细教程

Git——pull request详细教程

当我们需要协助其他仓库完成更改时，往往会用到git中的Pull Request操作，从而方便团队的协作管理和代码持续集成。 下面是详细的教程步骤。 一. Fork目标项目 比如说我现在要fork以下Qwen-VL的项目，如图所示： 随后点击Create即可…
阅读更多...
官宣｜HelpLook现已入驻钉钉应用市场，助力企业知识管理知识

官宣｜HelpLook现已入驻钉钉应用市场，助力企业知识管理知识

前一阵子OpenAI公司最新的GPT-4o技术震撼发布，人工智能的实际应用前景再次引起行业瞩目，或者被GPT4o的数据分析等特色功能折服。如您正寻求将AI技术融入企业知识管理，不要错过HelpLook！HelpLook AI知识库已经正式入驻钉钉应用市场…
阅读更多...
零基础小白本地部署大疆上云api（个人记录供参考）

零基础小白本地部署大疆上云api（个人记录供参考）

文章目录 运行前准备前后端项目运行1.前端项目： 后端项目运行必须先依靠emqx运行必须先依靠redis运行修改后端项目的application.yml文件 运行前准备 1.保证电脑又node.js环境，可以正常使用npm 2.Java的jdk必须是11及以上版本否则无效 3.下载好emqx,red…
阅读更多...
本杀小程序开发实战手册：从构思到上线

本杀小程序开发实战手册：从构思到上线

一、引言 随着移动互联网的快速发展，剧本杀作为一种新兴的娱乐方式，受到了越来越多年轻人的喜爱。为了满足市场需求，开发一款剧本杀小程序成为了许多创业者和开发者的选择。本文将从构思、设计、开发到上线等方面，为您详细解析剧…
阅读更多...
嘴尚绝卤味：健康美味新选择，开启味蕾新旅程！

嘴尚绝卤味：健康美味新选择，开启味蕾新旅程！

在这个美食文化繁荣的时代，卤味作为传统小吃界的一颗璀璨明珠，一直深受大众的喜爱。而今天，我要向大家介绍一款不仅美味可口，更注重健康营养的卤味品牌——嘴尚绝卤味。它以其独特的制作工艺和丰富的口感，成为众多卤味…
阅读更多...
若依ruoyi-vue element-ui 横向滚动条 动态横向滚动条

若依ruoyi-vue element-ui 横向滚动条 动态横向滚动条

动态横向滚动条 因为每次横向滑动都要到底部，引入插件 https://github.com/mizuka-wu/el-table-horizontal-scroll //动态横向滚动条移入样式 .el-table-horizontal-scrollbar :hover{//高度 变大10%transform: scaleY(1.5) translateY(-10%);//百分之八十亮度&a…
阅读更多...
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)

HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)

🎉不定期分享源码，关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS，未使用Javacsript代码，共有5个页面。 二、作品演示 三、代…
阅读更多...
C++贪心算法（3）

C++贪心算法（3）

整数区间 #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;int a[110][10]{0};for(int i0;i<n;i){cin>>a[i][1]>>a[i][2];}int cnt[110]{0};int mi99999;int mii-1;bool f[110]{false,false,false,false,false,false,false,…
阅读更多...
mybatis-plus代码生成器【一看就会，复制即用】

mybatis-plus代码生成器【一看就会，复制即用】

环境 jdk 17、mysql 8、springboot 3.1.2 POM依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-core</artifactId><version>3.5.6</version></dependency> <!-- mybatis-plus代码生成依…
阅读更多...
建筑施工突发事故应急处置vr安全培训平台

建筑施工突发事故应急处置vr安全培训平台

在不断发展的时代背景下&#xff0c;掌握必要的应急安全知识已成为我们生活中不可或缺的一部分。由央企携手我们华锐推出的3D线上应急宣教虚拟体验馆&#xff0c;标志着民众应急安全教育的全新里程碑&#xff0c;不仅突破了传统学习模式的局限&#xff0c;还让每个人都能在灵活…
阅读更多...
深入了解时间处理：当前时间显示与格式化

深入了解时间处理：当前时间显示与格式化

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、显示当前时间 1. 导入时间模块 2. 使用time模块获取当前时间 3. 格式化当前…
阅读更多...
Python爬虫入门到进阶：解锁网络数据的钥匙

Python爬虫入门到进阶：解锁网络数据的钥匙

Python爬虫入门到进阶&#xff1a;解锁网络数据的钥匙 一、Python爬虫基础1.1 爬虫基本概念1.2 Python爬虫必备库1.3 第一个爬虫示例 二、实战爬虫实例2.1 爬取天气数据2.2 高级技巧&#xff1a;异步爬虫 三、反爬机制与应对策略3.1 常见反爬机制3.2 应对策略 四、性能优化与安…
阅读更多...
oracle 12c GI卸载流程

oracle 12c GI卸载流程

集群节点停止服务 [crsctl stop crs -f grid运行deinstall [rootprimary1 bin]# su - grid [gridprimary1 ~]$ cd $ORACLE_HOME/deinstall [gridprimary1 deinstall]$ ls bootstrap_files.lst bootstrap.pl deinstall deinstall.pl deinstall.xml jlib readme.txt …
阅读更多...
最新文章

Copyright @ 2022~2023