折叠屏自适应UI框架实现方案——基于鸿蒙display_fold_status与Godot布局重写

m0_59315734

821人浏览 · 2025-06-20 08:13:31

m0_59315734 · 2025-06-20 08:13:31 发布

引言

折叠屏设备的普及为游戏交互带来了新挑战：屏幕可在折叠（如书本式）、展开（如大平板）或部分展开（如“L”型）状态下切换，传统固定布局的UI无法适配动态变化的屏幕形态。本文提出基于鸿蒙display_fold_status事件的折叠屏自适应UI框架，通过重写Godot UI布局模块，实现UI元素随折叠状态动态调整，最终达成“单屏适配、多态兼容”的交互体验。

一、需求分析与技术痛点

1.1 核心需求

目标场景为跨折叠屏设备的3D游戏（如策略手游、角色扮演），需支持：

折叠状态感知：实时获取屏幕折叠角度（0°~180°）、展开方向（横向/纵向）等状态；
布局动态调整：根据折叠状态自动切换UI布局（如折叠时隐藏侧边栏，展开时显示分屏菜单）；
元素比例保持：关键UI元素（如血条、技能图标）在不同折叠状态下保持视觉一致性；
性能无损耗：布局调整过程不影响主线程渲染，避免卡顿。

1.2 技术痛点

事件传递壁垒：鸿蒙的display_fold_status事件运行在系统层，需与Godot引擎的事件循环打通；
布局引擎局限：Godot原生布局（如GridContainer）依赖固定尺寸，无法直接响应动态折叠状态；
坐标系统差异：折叠屏的屏幕空间随折叠角度变化（如双屏拼接后的虚拟坐标系），需重新映射UI位置；
多分辨率适配：折叠状态切换可能导致屏幕分辨率突变（如折叠时为1800×2200，展开时为2400×3000），传统缩放方案失效。

二、关键技术架构：鸿蒙事件→Godot布局联动

2.1 整体架构设计

系统分为鸿蒙折叠状态感知层→事件传递层→Godot布局适配层三部分，核心流程如下：

graph TD
    A[鸿蒙系统] --> B[display_fold_status事件]
    B --> C[事件监听服务（鸿蒙Ability）]
    C --> D[跨进程通信（传递折叠状态）]
    D --> E[Godot布局管理器]
    E --> F[动态调整UI布局]
    F --> G[渲染输出]

三、鸿蒙折叠状态感知与事件传递

3.1 鸿蒙display_fold_status事件解析

鸿蒙通过DisplayManager提供折叠状态查询接口，支持监听DISPLAY_FOLD_STATUS_CHANGED事件，获取以下关键信息：

foldAngle：折叠角度（0°表示完全展开，180°表示完全折叠）；
displayState：折叠状态（STATE_FOLDING/STATE_UNFOLDING/STATE_FOLDED/STATE_EXPANDED）；
screenRect：当前有效显示区域的矩形坐标（含双屏拼接时的虚拟坐标）。

3.1.1 鸿蒙侧事件监听实现（Java）

在鸿蒙主Ability中注册折叠状态监听器，实时获取状态变化：

// 鸿蒙Ability中监听折叠状态（MainAbilitySlice.java）
public class MainAbilitySlice extends AbilitySlice {
    private DisplayManager displayManager;
    private IDisplayChangeListener foldListener;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        displayManager = DisplayManager.getInstance();
        // 注册折叠状态变更监听
        foldListener = new IDisplayChangeListener() {
            @Override
            public void onChanged(DisplayChangeEvent event) {
                if (event.getDisplayState() == DisplayState.STATE_FOLD_CHANGED) {
                    // 获取折叠角度与显示区域
                    float foldAngle = event.getFoldAngle();
                    RectF screenRect = event.getScreenRect();
                    // 通过IPC传递至Godot
                    sendFoldStatusToGodot(foldAngle, screenRect);
                }
            }
        };
        displayManager.registerDisplayChangeListener(foldListener);
    }

    // 跨进程发送折叠状态至Godot
    private void sendFoldStatusToGodot(float angle, RectF rect) {
        MessageParcel data = MessageParcel.obtain();
        data.writeFloat(angle);
        data.writeFloat(rect.left);
        data.writeFloat(rect.top);
        data.writeFloat(rect.right);
        data.writeFloat(rect.bottom);
        
        // 发送至Godot主进程
        BundleManager.getBundleManager().resolveAbility(
            new Intent.OperationBuilder()
                .withDeviceId("")
                .withBundleName("com.example.godot.game")
                .withAbilityName("com.example.godot.MainAbility")
        ).then(abilityInfo -> {
            abilityInfo.getAbility().sendMessage(MSG_FOLD_STATUS, data);
        });
    }
}

3.2 Godot事件接收与状态存储

Godot主脚本通过_input或自定义消息回调接收鸿蒙传递的折叠状态，存储为全局变量供布局模块调用：

# Godot主脚本（GDScript）
extends Node

# 全局折叠状态变量
var fold_angle = 0.0  # 折叠角度（0~180°）
var screen_rect = Rect2(0, 0, 0, 0)  # 有效显示区域

# 接收鸿蒙发送的折叠状态消息
func _on_fold_status_received(message):
    if message.get_type() == MSG_FOLD_STATUS:
        var data = message.get_data()
        fold_angle = data.read_float()
        screen_rect = Rect2(
            data.read_float(),  # left
            data.read_float(),  # top
            data.read_float(),  # right
            data.read_float()   # bottom
        )
        # 触发布局更新
        update_ui_layout()

# 每帧检查是否需要更新布局（避免频繁计算）
func _process(delta):
    if fold_angle_changed or screen_rect_changed:
        update_ui_layout()

四、Godot UI布局模块重写：动态适配折叠状态

4.1 自定义折叠感知布局容器

通过继承Godot的Control节点，实现FoldableLayout容器，重写其_size_changed和_input_event方法，使其能响应折叠状态变化并重新布局子节点。

4.1.1 核心逻辑设计

# 自定义折叠感知布局容器（GDScript）
extends Control

# 子节点布局规则（可配置）
var layout_rules = {
    "header": {"anchor": Vector2(0.5, 0), "offset": Vector2(0, 20)},  # 顶部居中
    "sidebar": {"anchor": Vector2(0, 0.5), "offset": Vector2(-100, 0)},  # 左侧居中
    "content": {"anchor": Vector2(0.5, 0.5), "offset": Vector2(0, 0)}   # 居中
}

# 重写布局更新方法
func _size_changed():
    # 调用父类布局更新
    .size_changed()
    # 根据折叠状态重新计算子节点位置
    update_children_position()

# 核心布局更新逻辑
func update_children_position():
    for child in get_children():
        if child is Control and child.name in layout_rules:
            var rule = layout_rules[child.name]
            # 根据折叠角度调整锚点和偏移
            var adjusted_anchor = adjust_anchor(rule.anchor)
            var adjusted_offset = adjust_offset(rule.offset)
            
            # 设置子节点位置与锚点
            child.anchor_left = adjusted_anchor.x
            child.anchor_top = adjusted_anchor.y
            child.position = adjusted_offset

# 根据折叠角度调整锚点（示例逻辑）
func adjust_anchor(original_anchor):
    # 折叠角度越大，横向锚点向中心收缩（如折叠时双屏拼接，左右屏各占50%）
    var folded_factor = clamp(fold_angle / 180.0, 0.0, 1.0)
    var new_x = original_anchor.x * (1 - folded_factor) + 0.5 * folded_factor
    var new_y = original_anchor.y  # 纵向锚点保持不变
    return Vector2(new_x, new_y)

# 根据折叠角度调整偏移（示例逻辑）
func adjust_offset(original_offset):
    # 折叠时缩小水平偏移量（避免元素超出屏幕）
    var folded_factor = clamp(fold_angle / 180.0, 0.0, 1.0)
    var new_x = original_offset.x * (1 - folded_factor)
    var new_y = original_offset.y  # 纵向偏移保持不变
    return Vector2(new_x, new_y)

4.2 响应式布局策略

根据折叠状态的不同，定义差异化的布局规则：

折叠状态	布局策略	示例场景
完全展开（0°）	双屏拼接为完整大屏，使用宽屏布局（如分屏菜单、横向滚动列表）	主界面、地图探索
部分折叠（90°）	左右屏各显示部分内容，关键元素居中（如左侧显示角色状态，右侧显示战斗日志）	战斗界面、角色详情
完全折叠（180°）	仅保留单屏核心区域（如底部操作栏、顶部血条），隐藏非必要元素	战斗操作、快速菜单

4.2.1 布局规则动态切换

通过fold_angle阈值触发不同布局策略：

# 根据折叠角度切换布局模式
func determine_layout_mode():
    if fold_angle < 45.0:
        return LAYOUT_MODE.EXPANDED  # 完全展开
    elif fold_angle < 135.0:
        return LAYOUT_MODE.PARTIAL   # 部分折叠
    else:
        return LAYOUT_MODE.FOLDED    # 完全折叠

# 应用对应布局规则
func apply_layout_rules(mode):
    match mode:
        LAYOUT_MODE.EXPANDED:
            # 展开模式：显示分屏菜单
            $Sidebar.show()
            $ContentContainer.set_size(Vector2(screen_rect.width * 0.7, screen_rect.height))
        LAYOUT_MODE.PARTIAL:
            # 部分折叠：调整侧边栏宽度
            $Sidebar.set_width(screen_rect.width * 0.3)
            $ContentContainer.set_size(Vector2(screen_rect.width * 0.6, screen_rect.height))
        LAYOUT_MODE.FOLDED:
            # 折叠模式：隐藏侧边栏，缩小内容区域
            $Sidebar.hide()
            $ContentContainer.set_size(Vector2(screen_rect.width * 0.9, screen_rect.height * 0.6))

五、性能优化与坐标映射

5.1 布局更新防抖

为避免折叠状态频繁变化（如用户缓慢折叠时）导致布局重复计算，采用防抖技术：

# 布局更新防抖（GDScript）
var debounce_timer = 0.0
const DEBOUNCE_DELAY = 0.2  # 200ms防抖间隔

func update_ui_layout():
    debounce_timer = 0.0  # 重置计时器

func _process(delta):
    if debounce_timer < DEBOUNCE_DELAY:
        debounce_timer += delta
        return
    # 执行实际布局更新
    var mode = determine_layout_mode()
    apply_layout_rules(mode)

5.2 虚拟坐标映射

折叠屏的双屏拼接会导致物理坐标与虚拟坐标不一致（如折叠时左右屏的物理坐标连续，但虚拟坐标需合并为单一屏幕）。通过鸿蒙提供的display_rect接口获取虚拟坐标，将UI元素的位置映射到虚拟坐标系：

# 虚拟坐标映射（GDScript）
func map_to_virtual_coordinate(physical_pos):
    # 获取当前有效显示区域的虚拟坐标
    var virtual_rect = get_virtual_screen_rect()  # 通过鸿蒙接口获取
    # 将物理坐标转换为虚拟坐标
    var virtual_x = (physical_pos.x - virtual_rect.position.x) / virtual_rect.size.x
    var virtual_y = (physical_pos.y - virtual_rect.position.y) / virtual_rect.size.y
    return Vector2(virtual_x, virtual_y)