FoldSplitContainer

FoldSplitContainer 组件简易使用教程

FoldSplitContainer 组件是 HarmonyOS 中用于实现折叠屏二分栏或三分栏布局的重要组件,能够有效适配折叠屏设备在不同状态下的界面展示需求。以下是其简易使用方法:

1. 引入与基本设置

  • 版本要求:该组件从 API Version 12 开始支持,确保项目的 HarmonyOS 版本满足此要求。
  • 创建组件实例:在代码中导入FoldSplitContainer,通过FoldSplitContainer({...})创建实例。例如:
FoldSplitContainer({
    primary: () => {
        // 主要区域内容构建函数
    },
    secondary: () => {
        // 次要区域内容构建函数
    },
    extra: () => {
        // 扩展区域内容构建函数(可选)
    },
    expandedLayoutOptions: {
        // 展开态布局选项
    },
    hoverModeLayoutOptions: {
        // 悬停态布局选项
    },
    foldedLayoutOptions: {
        // 折叠态布局选项
    },
    animationOptions: null,  // 动画效果参数(可选)
    onHoverStatusChange: (status) => {
        // 悬停状态改变回调函数
    }
})

2. 区域内容构建

  • 主要区域(primary):使用@Builder函数定义主要区域的内容,如:
@Builder
privateRegion() {
    Text("Primary")
      .backgroundColor('rgba(255, 0, 0, 0.1)')
      .fontSize(28)
      .textAlign(TextAlign.Center)
      .height('100%')
      .width('100%')
}

然后在FoldSplitContainerprimary回调中调用该函数。

  • 次要区域(secondary):与主要区域类似,通过@Builder定义内容并在secondary回调中使用。
  • 扩展区域(extra):同样的方式构建内容,若不传入,则不会显示扩展区域。

3. 布局选项配置

  • 展开态(expandedLayoutOptions)

    • isExtraRegionPerpendicular:设置扩展区域是否上下贯穿整个组件,默认值为true
    • verticalSplitRatio:指定主要区域与次要区域的高度比例,默认值为PresetSplitRatio.LAYOUT_1V1(1:1 比例)。
    • horizontalSplitRatio:当有扩展区域时,设置主要区域与扩展区域的宽度比例,默认值为PresetSplitRatio.LAYOUT_3V2(3:2 比例)。
    • extraRegionPosition:当isExtraRegionPerpendicularfalse时,确定扩展区域的位置(topbottom),默认值为ExtraRegionPosition.top
  • 悬停态(hoverModeLayoutOptions)

    • showExtraRegion:控制在半折叠状态下是否显示扩展区域,默认值为false
    • horizontalSplitRatio:同展开态中该参数含义,默认值PresetSplitRatio.LAYOUT_3V2
    • extraRegionPosition:当showExtraRegiontrue时,设置扩展区域位置,默认ExtraRegionPosition.top。注意设备悬停态时布局计算需考虑避让区域。
  • 折叠态(foldedLayoutOptions)

    • verticalSplitRatio:设置主要区域与次要区域的高度比例,必填,默认PresetSplitRatio.LAYOUT_1V1

4. 事件处理

  • onHoverStatusChange:当折叠屏进入或退出悬停模式时触发该回调函数,可在函数中处理如界面更新、状态记录等操作,例如根据悬停状态改变某些元素的显示或隐藏。

通过以上步骤,开发者可以在 HarmonyOS 应用中灵活运用 FoldSplitContainer 组件,为折叠屏设备提供良好的用户体验和适配性。

posted @   flfljh2024  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示