首页
学习
活动
专区
圈层
工具
发布

鸿蒙开发实战:鸿蒙应用开发中的页面管理工具类详解

借助这些功能,开发者能够轻松获取页面的关键信息,如顶部安全区域高度、底部安全区域高度,以及全屏开发状态和状态栏颜色等。这一工具类无疑是鸿蒙应用开发中不可或缺的一部分。...三、核心属性大揭秘顶部安全区域高度(状态栏高度)变量名:static statusBarHeight: number = 0解读:这一属性帮助开发者快速获取顶部安全区域的高度,即状态栏的高度。...底部安全区域高度变量名:static navigationBarHeight: number = 0解读:此属性代表底部安全区域的高度,通常对应于导航栏的高度。...在初始化过程中,工具类会自动获取主窗口对象、设置全屏开发状态,并计算顶部和底部安全区域的高度,为后续的页面布局与管理提供基础数据。...LibWindowHelper.statusBarHeight = Number(UIUtil.px2vp(avoidAreaTop.topRect.height).toPrecision(5)); // 获取底部导航栏区域

6610

鸿蒙开发实战案例:沉浸式适配案例

效果图预览使用说明:首页顶部是Navigation沉浸式,滑动商品列表是滚动场景沉浸式点击首页的banner进入web页展示Web页沉浸式点击商品进入商品详情页,展示普通页沉浸式点击商品详情页的商品评论弹出评论弹框展示底部弹框沉浸式实现思路页面的显示区域...,默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠,默认情况下开发者开发的界面都被布局在安全区域内。..., 可支持组件在不改变布局情况下扩展其绘制区域至安全区外。...若页面顶部和底部背景色不一致,需分别处理,如本案例单独对顶部组件设置了expandSafeArea熟悉使其绘制延伸至状态栏。详情见NavImmersive.ets。...('avoidAreaChange')获取并动态监听安全区域的高度信息,手动进行避让。

20320
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    「Adobe国际认证」想要设计!搞懂风格指南,就是你最好的入门设计

    它让我们感到安全,它让我们知道我们可以期待什么。 对于品牌而言,保持这种稳定性以保持受众参与度非常重要。 如何设计风格指南 在开始设计之前,最好先了解什么是风格指南。 什么是风格指南?...如果您的品牌具有独特的个性,请在整个风格指南中从封面到封面(或从 PDF 的顶部到底部)显示出来。让我们从头开始。 故事 一个没有故事的品牌算不上一个品牌。公司的故事是整个品牌的基础。...您还可以展示如何在页面上布置这些照片的示例。 插图和图形 一些公司可能会使用手绘插图来补充或替代照片。独特的插图使公司脱颖而出,并创造出比传统图片展示更个性化的客户体验。...如果您的公司在其促销或营销产品中使用插图或背景元素,请不要忽视品牌风格指南中包含的内容。提供示例并描述应使用的插图和图形的整体风格。...如果您的公司更喜欢员工使用某些词或短语而不是其他词或短语,请通过提供一些示例来创建该做和不该做的部分,以清楚地展示您的品牌声音。 做有风格的事 风格指南是灯塔,引导您的所有员工在品牌内获得安全保障。

    45310

    研究人员使用宽场脑成像技术研究意图控制,探索更好的脑机接口使用方式

    两个小区域(R1和R2)用于控制光标,并且将从这些区域记录的活动输送到解码器中。顶部显示了两个区域的dF/F示例,蓝色箭头表示试验开始,粉色箭头表示目标命中。...神经活动模式的探索和利用 (A) 在训练之前(顶部),区域信号高度自发相关。动物在训练阶段早期探索了不同的激活模式(中部),以便在训练结束时发现和利用成功的模式(底部)。粉色箭头表示目标命中。...(B)在自发活动和BMI任务期间,以R1(顶部行)和R2(底部行)活动为种子的3只动物的皮层相关图。...(D) R1(顶部面板)和R2(底部面板)的平均活动方差在训练早期比在训练后期更大(n = 7只小鼠,第8天训练;阴影表明95%的置信区间在平均值左右),表明老鼠在一次训练过程中磨练出更可靠和可重复性的控制策略...每一行代表对任务(顶部,N = 131个单位)和回放(底部,N = 128个单位)条件中每个记录单元的8个光标位置中每个位置的标准化触发响应。

    58020

    提升用户体验?指示性设计元素不可或缺

    行李托运网站登陆页面 使用了插图,人物和飞机都指向了顶部最右侧的CTA,也就是BOOK YOUR TRANSFER这个按钮。 ?...约会应用程序的登录页面 使用了带有文本的插图,人物的视线正在看向文本内容。 ? 销售发饰的电子商务网站 使用了精美的插图,界面中人物的视线集中在首页标语上。 ?...此外,鼠标还可以提示用户滚动页面,手势动画可以提示用户滑动,总之,他们都可以帮助用户顺利地了解和探索你的页面。 某建筑设计工作室的网站 底部有一个鼠标形状的图标,告知用可以尝试向下滚动: ?...对于这种情况,有一个很棒的解决办法,可以在屏幕上可见区域的最下方显示的一部分内容,这样,用户就不会遗漏任何重要信息了。 时装模特网站 网页的底部区域展示了部分照片,提示用户可以滚动查看更多: ?...外卖网站 在页面底部显示菜品的一部分,提示用户可以滚动查看更多;此外,使用箭头作为方向提示,告知用户水平方向上也会看到更多信息: ?

    87630

    兼容iPhone X* 刘海的正确姿势

    开始之前我们先了解什么是 safe area,简单的来说就是除了刘海和胡子以外的区域为安全区域: 关于 viewport-fit viewport-fit 有3个值: contain: 可视窗口完全包含网页内容...apple 把安全区域的位置通过 css 属性提供给了开发者,它们可以通过CSS的constant( )函数来完成: constant(safe-area-inset-top):在Viewport顶部的安全区域内设置量...() 可以获取到非安全边距,再结合 padding 或 margin 来控制页面元素避开非安全区域。...2、 padding-bottom:calc(env(safe-area-inset-bottom)+50px); 计算 底部非安全区域距离 与 底部按钮高度 之和 来做为 padding-bottom...:env(safe-area-inset-bottom);增加一个 padding 值,让底部向外扩展一个非安全区域的距离。

    73210

    【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )

    / 底部 摆放的组件 , 会出现偏移 , 没有按照设计位置摆放 ; 安全区域适配 : 在一些手机中 , 顶部有刘海 , 水滴 等摄像头位置 , 底部有话筒 , 这些位置不能填充组件 , 有被阻挡的风险..., 不需要开发者进行手动干预 ; 如果页面中没有使用 Scaffold , 或者使用了 Scaffold 没有使用 appBar 和 bottomNavigationBar , 这样顶部导航栏偏上 ,...底部导航栏偏下 , 这里需要适配一下 ; 三、全面屏适配方法 ---- 全面屏适配方法 : 在 顶部 和 底部 留出足够的 安全区域 ; 方案一 : Flutter 中提供了一个 SafeArea 组件..., 使用该组件 包裹 页面 , 可以实现适配 ; 方案二 : 使用 MediaQuery.of(context).padding 获取屏幕四个方向上的 Padding ; 四、反面示例 ( 留海遮挡内容...) ---- 华为 Mate 30 手机中 , 使用如下代码 , 显示的内容 , 顶部没有预留足够的安全区域 , 导致部分内容 import 'package:flutter/material.dart

    5.8K20

    iPhone X 适配手Q H5 页面通用解决方案

    解决方案:在页面底部增加一层高度34px的颜色块,将操作栏上移34px,颜色可以自定义。 关于安全区域 这里可能有人会有疑问,为什么非通栏下的页面内容是通到底部的,而按钮却是在安全区域上方呢?...这个问题涉及到安全区域,iOS11 和先前版本的不同之处在于,webview 比较重视安全区域了。这意味着,如果给页面元素设置 top: 0, 它会渲染在屏幕顶部的44px之下,也就是状态栏下面。...如果给页面元素设置 bottom: 0, 它会渲染在屏幕底部的34px之上,也就是底部安全区域上面。...网页内容完全覆盖可视窗口 auto: The default value, 同contain的作用 通过给页面设置viewport-fit=cover,可以将页面的布局区域延伸到页面顶部和底部。...,使得安全区域的上下边距失效了。

    13.3K1911

    掌握 SwiftUI 的 Safe Area

    除非开发者明确要求视图突破安全区域的限制,否则 SwfitUI 将尽力确保开发者创建的视图都被布局到安全区域当中。SwiftUI 同时提供了一些方法和工具让开发者对安全区域有所控制。...本文将探讨如何在 SwiftUI 中获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图的安全区域等内容。...// 只扩展到底部.ignoresSafeArea(edges: .bottom) // 扩展到顶部和底部.ignoresSafeArea(edges: [.bottom, .trailing]) //...SafeAreaRegions 定义了三种安全区域划分: •container由设备和用户界面内的容器所定义的安全区域,包括诸如顶部和底部栏等元素。...,用 spacing 在想要显示的内容和安全区域添加内容之间添加额外的空间。

    8.4K31

    iPhone 检测 iPhone X 设备的几种方式和分辨率终极指南

    方式三:通过底部安全区域的高度来判断 方式四:通过是否支持 FaceID 判断 方式五:通过 UIStatusBar 的高度判断 结语 原文链接 参考连接 ---- 本文是我们前两天发的两条小集的汇总...备注:这里所说的 iPhone X 泛指上述介绍的屏幕大小为 5.8、6.1、6.5 英寸三种尺寸,且带有顶部刘海和底部操作条的 iPhone 设备。...后面我们想了一个简便的方法,即获取屏幕的宽度和高度,取较大一方进行比较是等于 812.0 或 896.0,代码如下: 方式三:通过底部安全区域的高度来判断 在去年 iPhone X 发布后,为了适配顶部的浏览和底部的操作条...,苹果在 iOS 11 上引入安全区域概念,建议开发者在安全区域内进行 UI 布局,因此我们可以获取屏幕 keyWindow 的 safeAreaInsets 值来判断设备是否 iPhone X。...欢迎补充~ ---- 结语 最后,绝大部分场景,我们需要检测设备是否为 iPhone X 是为了适配顶部的刘海区域和底部的操作条区域,但是这里我们更推荐通过 Auto Layout 结合 Safe Area

    1.7K20

    SCI-无线微型脑刺激器

    这个刺激电流为:产生硬膜外脑刺激所需的 2 至 20 mA 刺激电流 以下是PCB的框图: 还是有个逆变器的,因为是交变的电压 差分的刺激电极 定制的 PCBA 旨在从 ME 膜中获取能量并以数字方式控制输出刺激...使用输出开关打开和关闭输出刺激。通过依次刺激两个电极来保持电荷平衡输出。首先,底部电极用刺激电压进行刺激,同时顶部电极接地,然后顶部电极进行刺激,同时底部电极接地。使用电流检测放大器近似测量输出电阻。...使用不同的刺激电压和负载电阻来验证这一点,以确保在预期的操作区域内是准确的。...左插图:猪硬脑膜上方和皮肤下方的 DOT 植入物的横截面。 右插图:用于量化前肢运动的视频示例帧。...将最终固件刷入功能齐全的 PCBA,然后使用垂直放置的 0 欧姆电阻和导电环氧树脂将 ME 膜平行连接到顶部面板。

    12910

    《Motion Design for iOS》(十四)

    因为新iPhone的真实分辨率太高了,在第一次运行模拟器的时候你可能会惊讶,因为窗口非常巨大,可能会超过你屏幕的顶部和底部!幸运的是你可以在一个小一些的尺寸上显示模拟器窗口这样就方便看一些。...重要的是要记住模拟器不是测试你app的完美方式,唯一获取性能和app感觉的方式是在你的设备上运行它,你可以在Xcode开着的时候将设备连接Mac,跟随指令在你的手机上运行它。...Swift 在2014年夏天的苹果开发者大会,苹果公司宣布他们正在致力于一种新的编程语言,名为Swift,此语言从Objective-C、Rust、Haskell、Ruby、Python和其他语言中获取灵感...当2014年九月初发布iOS 8时,苹果宣布Swift发布了1.0版本并可以安全地使用于发布到App Store的app中。...我对于Objective-C和Swift的立场是:Swift太新了,而且在走向黄金时代生产app开发前依然有问题需要解决。

    98910

    Ask Apple 2022 与 SwiftUI 有关的问答(下)

    将背景扩展到安全区域Q:如果我有一个自定义的容器类型,可以接受一个顶部和底部的视图,是否有办法让 API 的调用者将所提供的视图的背景扩展到安全区域内,同时将内容( 如文本或按钮 )保留在安全区域内?...A:你可以尝试使用 safeAreaInset(edge: .top) { ... } 或 safeAreaInset(edge: .bottom) { ... } 修饰器来放置你的顶部和底部视图。...然后让顶部/底部视图忽略安全区域。我不确定这是否能满足你的用例,但值得一试。在 background 修饰器中,可以通过 ignoresSafeAreaEdges 参数设置是否忽略安全区域。...这个技巧对于处于屏幕的顶部或底部的视图十分有用。详情请参阅 推文[15] 。动画转场Q:为什么下面的代码没有显示动画转场。...可以尝试在获取位置改变的同时记录时间变化来计算速度。不过如果是涉及到用户交互,建议衡量一下用户对速度的敏感程度和交互效果本身,是否可以用更便捷的方式实现。

    16.3K30

    鸿蒙NEXT版仿微信聊天App的避让软键盘

    下面详细介绍如何在聊天界面有效避让输入法的软键盘。 一、软键盘为什么需要避让 点击App界面的编辑框,界面底部会自动弹出输入法的软键盘,这个软键盘占据了整个屏幕的三分之一空间。...比如下面的聊天界面,正常在页面顶部显示聊天标题栏,在页面底部显示聊天交互控件(包括编辑框、按钮等等)。 此时点击页面底部的编辑框,输入法的软键盘会从屏幕下方弹出,然后把整个聊天界面顶了起来。...这个规则就是设置一个安全区域,在安全区域内部的组件都不受软键盘影响。...该操作对应调用expandSafeArea方法,当方法参数为SafeAreaType.KEYBOARD时,表示对软键盘而言属于安全区域。...考虑到页面中部一大块都是聊天消息,该区域的layoutWeight属性为1表示占据除了标题栏和顶部控件以外的所有剩余页面。

    45210

    【愚公系列】《AIGC辅助软件开发》013-AI辅助客户端编程:AI辅助 iOS 应用开发

    通过利用 AI 的强大计算能力和学习能力,开发者能够更加高效地生成代码、检测错误,并获取技术建议。...如果你是编程初学者,可以先学习 Swift 的基础语法,如变量、数据类型、控制流、函数等。...- **过渡效果**:学习如何在视图之间添加过渡效果,如淡入淡出、缩放等。 **实践**: - 在按钮点击时,添加一个视图出现或消失的动画。 - 为列表中的项目添加删除动画。### 4....`TextField` 和 `SecureField`- **功能**:`TextField` 和 `SecureField` 是 SwiftUI 中的输入框组件,分别用于输入普通文本和安全文本(如密码...)、或底部(bottom)。

    1.7K10

    【愚公系列】2023年11月 Winform控件专题 Label控件详解

    None:无边框,控件不显示边框FixedSingle:单线边框,控件顶部、底部、左侧和右侧各显示一条线Fixed3D:三维边框,控件顶部、底部、左侧和右侧各显示一条凸起或凹陷的线使用方法:1.在设计模式下...以下是一些常用的Cursor类的方法和属性:Current:获取或设置当前光标。Clip:获取或设置光标的矩形范围。Position:获取或设置光标的坐标。Hide():隐藏鼠标光标。...具体而言,Dock属性可以设置为四个值:Top、Bottom、Left、Right,分别表示控件停靠在容器的顶部、底部、左侧、右侧。...例如,如果将一个Label控件的Dock属性设置为Top,则该控件将停靠在其容器的顶部,并且在容器大小改变时,该控件也会随之自动调整大小和位置,以保持停靠在顶部的位置不变。...运行程序后,可以看到四个Label控件分别停靠在Panel容器的顶部、底部、左侧和右侧。

    1.8K11

    将模型添加到场景中 - 在您的环境中显示3D内容

    设置为0的顶部,左,右和底部。确保它们都被约束到视图而不是安全区域,然后单击Add Constraints。安全区域是凹口下方和主页指示器上方的边距,通常是屏幕的可见部分。...如果被限制在安全区域而不是超级视图,这就是看起来的样子,显然,这看起来并不好看。 ? 横屏约束安全区 重新 Outlet 请记住,一个IBOutlet将sceneView链接到ARSCNView?...从对象库中,将UIButton拖动到场景视图的顶部。在“ 属性”检查器中,删除“ 按钮”标题并将图像设置为“ 按钮/添加”。 约束到底部20但这次是在安全区域,并取消选中Constrain到边距。...右键单击视图控制器+ ARSCNViewDelegate.swift并选择新建文件...。然后,选择Swift File,单击Next。...将隐藏和显示两种情况,因此隐藏值是布尔值。然后我们声明一个SCNAction用于淡入淡出,淡出用于隐藏和淡入显示。这些行动将运行根据是否隐藏是真还是假,一前一后。为此目的使用序列。

    6.7K20

    你的 App 为何在 iPhone 12 上显示异常,而别人的不会?

    真实 iPhone 11 Pro 的顶部安全距离是 44,底部安全距离是 34;而 iPhone 11 Pro Max 运行在放大显示(Display Zoom)下,虽然屏幕分辨率和 iPhone 11...Pro 相同,但顶部安全距离却是 40,底部安全距离是 31; 除了运行在兼容模式,退化为旧设备分辨率外,iPhone 还有一种尺寸适配策略:downsampling,例如全新一代的 iPhone12...,如果按照3x 图渲染,实际的渲染像素是 1125 x 2436,在 1080×2340 pixel 屏幕上显示不下,需要 downsampling / 1.04,不能按照 3x 图渲染;这样导致它的顶部安全距离是奇葩的...结论 因为用 Xcode 12.0 打的 ipa,在 iPhone 12 上运行在兼容模式,尺寸是 iPhone 11,重点是顶部安全距离、底部安全距离都和 iPhone 11 保持一致,所以不会有问题...如从 ViewController.view 获取时,时机太迟了,需要从更早创建的地方获取如 keyWindow,如: + (CGFloat)topOffset{ if (@available(

    2.7K30
    领券