hadss_avoid_area #

简介 #

1、使用Flutter实现原生高级组件FolderStack和FoldSplitContainer，效果与原生ArkUI效果一致。 （1）鸿蒙原生的FolderStack继承于Stack(层叠布局)控件，新增了折叠屏悬停能力，通过识别upperItems自动避让折叠屏折痕区后移到上半屏。 （2）鸿蒙原生的FoldSplitContainer分栏布局，实现折叠屏二分栏、三分栏在展开态、悬停态以及折叠态的区域控制。 2、Flutter框架中获取导航条、状态栏、挖孔、刘海、屏幕圆角等避让区域。 3、在Flutter框架中动态获取避让区域的实时数据。

工程目录 #

├─android                                   // Android原生能力实现
│  ├── src/main/kotlin/hadss/avoid_area
│         ├── AvoidArea.kt                  // Android返回数据对象
│         ├── AvoidAreaMethodCallHandler.kt // Android提供避让区域原生能力的桥接方法
│         ├── AvoidAreaPlugin.kt            // Android能力提供插件
│         ├── FolderStateStreamHandler.kt   // Android提供折叠原生能力的桥接方法
│         └── Rect.kt                       // Android返回区域数据对象
│ 
├─example                                   // example工程
│  └─lib
│     ├── avoid_area_ui.dart                // 区域避让测试UI
│     ├── fold_split_container_ui.dart      // FoldSplitContainer测试UI
│     ├── folder_stack_ui.dart              // FolderStack测试UI
│     └── main.dart                         // 主页面 
│
├─ios                                       // iOS原生能力实现
│  ├── Classes
│  │       ├── AvoidAreaPlugin.swift        // iOS能力提供插件方法实现
│  │       └── AWSafeAreaMonitor.swift      // iOS区域避让具体能力方法实现
│  └── hadss_avoid_area.podspec             // iOS库配置文件                
│
├─lib
│  ├── hadss_avoid_area.dart
│  ├── api
│  │    ├── avoid_area_api.dart             // 对外提供API接口
│  │    └── avoid_area.dart                 // 窗口相关类，用于API接口的参数以及返回
|  └── component
|        ├── folder_split_view.dart         // FoldSplitContainer组件
|        ├── folder_options.dart            // 折叠屏参数类
|        ├── folder_stack.dart              // FolderStack组件
|        └── folder_plugin.dart             // 原生接口对接工具类
|       
├─ohos
│  ├── src/main/ets/plugin
|         └── AvoidAreaPlugin.ets           // 鸿蒙能力提供插件
|         └── FolderStateStreamHandler.ets  // 折叠屏状态监听

安装与使用 #

运行前准备

flutter pub get
cd example

移动设备运行

flutter run

Web端运行

flutter run -d chrome --web-hostname=127.0.0.1

组件说明 #

FolderStack 继承于Stack(层叠布局) 控件，新增了折叠屏悬停能力，通过识别upperItems自动避让折叠屏折痕区后移到上半屏，以下是独有属性。其余属性和Stack保持一致

FoldingFeature折叠屏状态

FoldStatus折叠状态枚举类

使用示例：

build() {
  FolderStack(
    upperItems: const ["item1", "item2"],
    onFolderStateChange: (state) {
      print("state=$state");
    },
    children: [
      Container(
        key: ValueKey('item1'),
        width: double.infinity,
        height: double.infinity,
        color: Colors.red,
        child: const Center(
          child: Text("背景"),
        ),
      ),
      Container(
        key: ValueKey('item2'),
        color: Colors.blue,
        width: double.infinity,
        margin: const EdgeInsets.all(20),
        height: 30,
        child: const Text(
          "弹幕",
          textAlign: TextAlign.center,
        ),
      ),
      Container(
        color: Colors.yellow,
        child: const Text("标题，返回"),
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: double.infinity,
          height: 100,
          color: Colors.grey,
          alignment: Alignment.center,
          child: const Text(
            "进度条",
            textAlign: TextAlign.center,
          ),
        ),
      )
    ],
  );
}

FoldSplitContainer 分栏布局，实现折叠屏二分栏、三分栏在展开态、悬停态以及折叠态的区域控制。

FoldedRegionLayoutOptions折叠态布局信息

ExpandedRegionLayoutOptions展开态布局信息

HoverModeRegionLayoutOptions展开态布局信息

PresetSplitRatio区域比例,值为第一个区域的占用比例

使用示例：

build() {
  FoldSplitContainer(
    primary: Container(
        width: double.infinity,
        height: double.infinity,
        color: const Color.fromARGB(100, 255, 0, 0),
        child: Column()

      ///详细代码参考  example/lib/fold_split_container_ui.dart,
    ),
    secondary: Container(
        width: double.infinity,
        height: double.infinity,
        color: const Color.fromARGB(100, 0, 255, 0),
        child: Column()

      ///详细代码参考  example/lib/fold_split_container_ui.dart,
    ),
    extra: Container(
        width: double.infinity,
        height: double.infinity,
        color: const Color.fromARGB(100, 0, 0, 255),
        child: Column()

      ///详细代码参考  example/lib/fold_split_container_ui.dart,
    ),
    foldedLayoutOptions: foldedRegionLayoutOptions,
    expandedLayoutOptions: expandedRegionLayoutOptions,
    hoverModeLayoutOptions: foldingRegionLayoutOptions,
    onHoverStatusChange: (status) {},
  );
}

区域避让接口说明 #

AvoidAreaApi区域避让对外提供能力

AvoidAreaType系统规避区变化后返回的规避区域类型

AvoidArea系统规避区变化后返回的规避区域

Rect窗口矩形区域

特别说明：

getWindowAvoidArea Android目前避让区域只能获取到状态栏、刘海屏、导航栏3块，而且值和鸿蒙获取到的不一致，无法获取到软键盘以及手势区域避让区域； getWindowAvoidArea iOS由于手势区域UI不感知，所以返回数据均为0，同时addAvoidAreaListener的实现采用遍历返回的方式，屏幕转换情况下返回所有避让区域的最新值 addAvoidAreaListener&removeAvoidAreaListener Android目前未找到对应的监听和去监听方法，目前空实现

使用示例：

getWindowAvoidArea() async {
// 获取系统默认区域规避区
  await AvoidAreaApi.getWindowAvoidArea(AvoidAreaType.system);
  if (kDebugMode) {
    print('avoidAreaMethod.system = ${json.encode(windowAvoidArea)}');
  }
}

addAvoidAreaListener() {
  // 添加系统规避区变化事件监听
  AvoidAreaApi.addAvoidAreaListener((event) {
    if (kDebugMode) {
      print('receiveBroadcastStream event = $event');
    }
  });
}

removeAvoidAreaListener() {
  // 删除系统规避区变化事件监听
  AvoidAreaApi.removeAvoidAreaListener();
}

贡献代码 #

使用过程中发现任何问题都可以提 Issue。
同时，也非常欢迎您提交 PR。

开源协议 #

本项目基于Apache License 2.0 ，请自由地享受和参与开源。