首页 > 其他分享 >鸿蒙Next 开发App,沉浸式效果

鸿蒙Next 开发App,沉浸式效果

时间:2024-09-02 13:26:04浏览次数:5  
标签:颜色 鸿蒙 App Next V5 https 组件 com

今天给自己开发的鸿蒙Next App 实现沉浸式效果,其实就是屏幕上边的状态栏和下边的横条区域和App界面一样的颜色。

之前在知识星球分享过 expandSafeArea 的方案(https://t.zsxq.com/8jkJ9),但后来在真机上发现有问题,在对App进行缩小分屏的时候,有个缩小动画,发现其实底部还是默认色-白色,而我的App主要是展示颜色切换的,会有明显的割裂感。所以我需要将窗口的背景色一起换掉。同时保留安全区域,expandSafeArea 的方案默认是没有安全区域了,它是将组件进行了延伸。

翻阅文档后,我选择了组件安全区方案,既保留安全区域不可以点击,又让颜色一致,达成沉浸式效果。

在组件build之前,先给一个颜色,这也是App打开时的随机颜色

然后在点击事件里(点击的时候切换颜色),也进行一次设置,这样每次组件颜色变化的时候,窗口(window)的背景色也跟着变化,看起来就有沉浸式效果了

今天的分享到此结束,大家学废了吗

标签:颜色,鸿蒙,App,Next,V5,https,组件,com
From: https://blog.csdn.net/2401_87065088/article/details/141789603

相关文章

  • 基于SpringBoot+Vue+uniapp的网络游戏交易系统(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp的购物商场(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 2024最新——基于SpringBoot+Vue+uniapp的QQ村旅游网站(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 2024最新——基于SpringBoot+Vue+uniapp的图书管理系统(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • RAG在PostgreSQL上的实现:使用Azure Container Apps和OpenAI构建智能问答系统
    RAG在PostgreSQL上的实现:使用AzureContainerApps和OpenAI构建智能问答系统随着人工智能技术的快速发展,越来越多的企业和开发者开始探索如何将AI能力整合到现有的应用系统中。本文将介绍一种基于检索增强生成(RetrievalAugmentedGeneration,RAG)的方案,通过结合AzureCo......
  • 使用 apply 中的方法
    在JavaScript中,apply()方法是Function.prototype的一个方法,它用于调用一个函数,并将指定的数组作为参数传递给该函数。以下是一个使用apply()方法的示例:functionmyFunction(a,b){returna+b;}vararray=[2,3];varresult=myFunction.apply(null,array);......
  • uniapp基础知识点补充
    一.响应式单位rpx以及搭配使用UI产品1.px和rpx的区别2.rpx的作用及理解响应式布局:使用 rpx 可以让元素在不同屏幕尺寸的设备上自动调整大小,从而实现响应式布局。锁定屏幕方向:由于 rpx 是基于屏幕宽度计算的,如果希望在横屏和竖屏之间保持一致的显示效果,建议锁定屏幕方......
  • springboot 惠农服务平台APP-计算机毕业设计源码50601
    目录1绪论1.1研究背景1.2研究意义1.3论文结构与章节安排2 惠农服务平台app系统分析2.1可行性分析2.2系统功能分析2.3 系统用例分析2.4系统流程分析2.5本章小结3惠农服务平台app总体设计3.1 系统功能模块设计3.2数据库设计表access_tok......
  • 华为见非凡品牌盛典及鸿蒙智行新品发布会定档,颠覆产品即将亮相
    9月2日,华为终端宣布将于9月10日14:30举行华为见非凡品牌盛典及鸿蒙智行新品发布会。华为常务董事、终端BG董事长余承东表示,即将发布的产品将是华为最具引领性、创新性和颠覆性的产品,引发了业界的广泛关注。博主暗示发布会新品内容:“9+7+3”博主@Adak封狼居胥在社交媒体上发......
  • 鸿蒙跨端实践-ArkTS和CAPI的混合开发实现
    一、背景在动态化-鸿蒙跨端方案文章中,讲述了动态化适配鸿蒙的方案实现,当在鸿蒙系统进行UI渲染的时候,我们使用了系统的组件进行递归渲染。在iOS和Android也是借助各自系统组件进行的渲染,但是在鸿蒙系统会存在以下4个严重问题:1.UI层级过多以金融APP理财频道页中的一个乐高楼层中的“......