ToB企服应用市场:ToB评测及商务社交产业平台
标题:
鸿蒙5.0开辟【适配折叠屏睁开与收起,实现单屏与双屏UI的无缝切换】
[打印本页]
作者:
汕尾海湾
时间:
2024-9-1 09:24
标题:
鸿蒙5.0开辟【适配折叠屏睁开与收起,实现单屏与双屏UI的无缝切换】
随着移动设备技术不断革新,折叠屏手机以其独特的设计和灵活的显示能力,为用户带来了亘古未有的视觉体验。然而,这种新型屏幕形式也对界面设计提出了全新挑战。如何在用户��开或收起折叠屏时,即时响应并做出相应的UI调整,是确保用户体验连贯性的关键。
在这样的背景下,实现界面布局在单屏与双屏模式之间的无缝切换。不但能让应用在单屏模式下保持简洁优雅,也能在双屏模式下提供更广阔的视野和更丰富的交互体验。
适配前后对比
适配前
不做任何处置惩罚
,UI布局会根据折叠屏的睁开、收起自适应屏幕,示例如下:
适配后,
单屏、双屏各自一套 UI 设计
可根据折叠屏的睁开、收起两种状态,实现差异性UI交互设计,示例如下:
实际开辟中,我们可以在同一个页面,共用一套数据,实现从单屏到双屏的平滑过渡,让用户在利用过程中感受到无缝的体验。
及时监听折叠屏状态
HarmonyOS NEXT 提供 *
媒体查询 (@ohos.mediaquery)
*可用于实现监听折叠屏睁开、收起变化。
该方法库实用于 鸿蒙APP开辟、元服务开辟,关键代码如下:
listener = mediaquery.matchMediaSync('(min-width: 400vp)')
onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {
if (mediaQueryResult.matches) {
// 展开态
} else {
// 折叠态
}
}
复制代码
为了方便,我们可把该能力封装成工具类:
import mediaquery from '@ohos.mediaquery'
/// 折叠屏幕变化监听
abstract class FoldStatusObserver {
public static readonly foldStatusKey = 'foldStatusKey'
private static listener?: mediaquery.MediaQueryListener
/// 在 MainPage aboutToAppear 生命周期内调用
public static startListening() {
FoldStatusObserver.listener = mediaquery.matchMediaSync('screen and (min-width: 400vp)')
FoldStatusObserver.listener.on('change', FoldStatusObserver.onFoldStatusChange)
}
/// 在 MainPage aboutToDisappear 生命周期内调用
public static stopListening() {
FoldStatusObserver.listener?.off('change', FoldStatusObserver.onFoldStatusChange)
}
/// 在任意 Component 内通过使用 `@StorageProp('foldStatusKey') isFold: boolean = false` 进行监听变化
private static onFoldStatusChange(result: mediaquery.MediaQueryResult): void {
const status = AppStorage.get<boolean>(FoldStatusObserver.foldStatusKey)
if (result.matches !== status) {
AppStorage.set(FoldStatusObserver.foldStatusKey, result.matches)
}
}
}
export { FoldStatusObserver }
复制代码
利用方式:
第一步,在
EntryAbility
onCreate 生命周期内设置默认值:
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
AppStorage.setOrCreate('foldStatusKey', false)
}
复制代码
第二步,在 MainPage aboutToAppear、aboutToDisappear 生命周期内开启、关闭折叠状态监听:
struct MainPage {
aboutToAppear(): void {
FoldStatusObserver.startListening()
}
aboutToDisappear(): void {
FoldStatusObserver.stopListening()
}
}
复制代码
第三步,在恣意 Component 内通过利用
@StorageProp(‘foldStatusKey’) isFold
进行监听折叠屏状态变化
@Component
export struct MyComponent {
@StorageProp('foldStatusKey') isFold: boolean = false
build() {
Stack() {
if (this.isFold) {
// 这是折叠屏展开时UI
} else {
// 这是折叠屏收起时UI
}
}
.width('100%')
.height('100%')
}
}
复制代码
容器封装与UI自适应
封装一个
响应折叠状态变化的父容器
,我们可以在需要折叠屏差异化设计的页面,通过利用父容器的方式让代码变得更简洁。
抛砖引玉,容器封装:
/// 响应折叠屏变化的父容器
@Component
export struct FoldStatusContainer {
@StorageProp('foldStatusKey') isFold: boolean = false
// 非折叠状态 UI 布局
@BuilderParam unFoldBodyContainer: () => void = this.defaultContainer
// 折叠状态 UI 布局
@BuilderParam foldBodyContainer: () => void = this.defaultContainer
@Builder
defaultContainer() {
Column()
}
build() {
Stack() {
if (this.isFold) {
this.foldBodyContainer()
} else {
this.unFoldBodyContainer()
}
}
.width('100%')
.height('100%')
}
}
复制代码
在需要折叠屏差异化UI设计的页面里,我们这样利用 FoldStatusContainer :
// 适配折叠屏示例页面
@Component
export struct FixFoldUiExample {
@Builder
unFoldUiContainer() {
Stack() {
Text('我是全屏内容').fontSize(20)
}
.width('100%')
.height('100%')
.backgroundColor(Color.Orange)
}
@Builder
foldUiContainer() {
Row() {
Stack() {
Text('我是左边的分屏内容').fontSize(20)
}
.backgroundColor(Color.Grey)
.height('100%')
.layoutWeight(1)
Stack() {
Text('我是右边的分屏内容').fontSize(20)
}
.backgroundColor(Color.Pink)
.height('100%')
.layoutWeight(1)
}
.width('100%')
.height('100%')
}
@Builder
bodyContainer() {
FoldStatusContainer({
unFoldBodyContainer: this.unFoldUiContainer,
foldBodyContainer: this.foldUiContainer,
})
}
build() {
NavDestination() {
Column() {
this.bodyContainer()
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}.title('适配折叠屏')
}
}
复制代码
该页面的效果如下:
总结
通过适配折叠屏,用户可以在差别形态下获得最佳的交互体验,无论是单屏照旧睁开后的双屏模式。
折叠屏为UI设计提供了新的交互方式,如拖拽、分屏等,适配后的应用可以利用这些特性创造新的用户交互体验。
末了呢,许多开辟朋友不知道需要学习那些鸿蒙技术?鸿蒙开辟岗位需要把握那些焦点技术点?为此鸿蒙的开辟学习必须要体系性的进行。
而网上有关鸿蒙的开辟资料非常的少,如果你想学好鸿蒙的应用开辟与体系底层开辟。你可以参考这份资料,少走许多弯路,节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《
鸿蒙NEXT星河版OpenHarmony开辟文档
》里面内容包罗了(
ArkTS、ArkUI开辟组件、Stage模型、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战等等
)鸿蒙(Harmony NEXT)技术知识点
如果你是一名Android、Java、前端等等开辟人员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开辟的学习蹊径图。
高清完备版请点击
→《鸿蒙NEXT星河版开辟学习文档》
针对鸿蒙成长蹊径打造的鸿蒙学习文档。话不多说,我们直接看具体资料鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开辟入门教学视频,资助大家在技术的蹊径上更进一步。
《鸿蒙 (OpenHarmony)开辟学习视频》
《鸿蒙生态应用开辟V2.0白皮书》
《鸿蒙 (OpenHarmony)开辟根本到实战手册》
《鸿蒙开辟根本》
《鸿蒙开辟进阶》
《鸿蒙开辟实战》
获取这份鸿蒙星河版学习资料
,请点击→《鸿蒙NEXT星河版开辟学习文档》
总结
鸿蒙—作为国家主力推送的国产操作体系。部门的高校已经取消了安卓课程,从而开设鸿蒙课程;企业纷纷跟进启动了鸿蒙研发。
并且鸿蒙是完全具备无与伦比的机会和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开辟,未来将会支持 50 万款的应用。那么这么多的应用需要开辟,也就意味着需要有更多的鸿蒙人才。鸿蒙开辟工程师也将会迎来爆发式的增长,学习鸿蒙势在必行!
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4