bottomsheet

本项目基于bottomsheet 开发。

简介

BottomSheet 是一个从屏幕底部弹出的、可关闭的视图组件。

效果展示

下载安装

ohpm install @ohos/bottomsheet

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包。

约束与限制

兼容性

在下述版本验证通过：

• DevEco Studio: DevEco Studio 6.0.2 Release(6.0.2.640), SDK: API22(6.0.2.130)。
• DevEco Studio: NEXT Developer Beta1(5.0.3.122), SDK: API12(5.0.0.18)。

权限要求

无

使用示例

完整示例

import { router } from '@kit.ArkUI';
import { BottomSheetComponent, BottomSheetCtrl } from '@ohos/bottomsheet';

/**
 * 底部弹窗演示页面
 */
@Entry
@Component
struct BottomSheetFragmentPage {
  private bottomSheetCtrl: BottomSheetCtrl = new BottomSheetCtrl();

  build() {
    Column() {
      // 顶部导航栏
      this.TopComponent();

      // 传递 @Builder 方法给子组件
      BottomSheetComponent({
        bottomSheetController: this.bottomSheetCtrl,
        bottomSheetLayout: this.BottomSheetLayout.bind(this),
        backgroundLayout: this.BackgroundLayout.bind(this)
      });
    }
    .height('100%')
      .width('100%')
      .backgroundColor('#F5F5F5');
  }

  /**
   * 顶部导航栏组件
   */
  @Builder
  TopComponent() {
    Row() {
      Row() {
        Text('←')
          .fontSize(20)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .padding({
            left: 16,
            top: 16,
            bottom: 16,
            right: 16
          })
          .onClick(() => {
            router.back();
          });

        Text('BottomSheet Fragment')
          .fontSize(20)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .padding({ left: 16, top: 16, bottom: 16 });
      }
      .width('100%')
        .backgroundColor('#FFE12828');
    }
    .width('100%')
      .backgroundColor('#ffb81f1f')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]);
  }

  @Builder
  BackgroundLayout() {
    Column() {
      Button('SHOW')
        .type(ButtonType.Normal)
        .width('100%')
        .backgroundColor('#ffd7d7d7')
        .fontColor('#ff050505')
        .onClick(() => {
          this.bottomSheetCtrl.toTop();
        });
    }
    .padding(16);
  }

  /**
   * 底部弹窗内容布局
   */
  @Builder
  BottomSheetLayout() {
    Column() {
      Text('Hello, World!')
        .width('100%')
        .fontColor('#ff918787')
        .padding(10);
    }
    .width('100%');
  }
}

注意事项

无

使用说明

1. 在相应的文件中引入组件

import { BottomSheetComponent, BottomSheetCtrl } from '@ohos/bottomsheet';

2. 在使用到的地方创建组件

在使用到的地方创建组件，创建时需要传入用到的参数。

      BottomSheetComponent({
        bottomSheetController: this.bottomSheetCtrl,
        bottomSheetLayout: this.BottomSheetLayout.bind(this),
        backgroundLayout: this.BackgroundLayout.bind(this)
      });

接口说明

组件

名称	描述	主要参数	必填	HarmonyOS 平台支持
BottomSheetComponent	基础底部弹窗组件，支持拖拽交互和动态背景透明度效果	bottomSheetController: BottomSheetCtrl bottomSheetLayout: @BuilderParam backgroundLayout: @BuilderParam	是	是
MenuSheetComponent	菜单底部弹窗组件，支持列表和网格两种显示模式	title: string menus: MenuItem[] menuType: MenuType (LIST/GRID) onMenuItemClick: (item: MenuItem) => void bottomSheetController?: BottomSheetController backgroundLayout?: @BuilderParam	否	是
ImagePickerSheetComponent	图片选择器底部弹窗组件，支持相机、相册和图片选择功能	title: string imageItemView: string[] onImageItemClick: (item: string) => void onCameraPickerClick: () => void onImagePickerClick: () => void bottomSheetController?: BottomSheetController backgroundLayout?: @BuilderParam	否	是
IntentPickerSheetComponent	意图选择器底部弹窗组件，用于展示应用列表供用户选择	title: string apps: APPInfo[] onAppPickedClick: (item: APPInfo) => void bottomSheetController?: BottomSheetController backgroundLayout?: @BuilderParam	否	是

控制器

名称	描述	方法	说明	HarmonyOS 平台支持
BottomSheetCtrl	底部弹窗控制器	toTop(): void	展开到底部弹窗到顶部	是
		toBottom(): void	收起到底部弹窗到底部
		toCenter(): void	移动到底部弹窗到中心

关于混淆

• 代码混淆，请查看代码混淆简介。
• 如果希望bottomsheet库在代码混淆过程中不会被混淆，需要在混淆规则配置文件obfuscation-rules.txt中添加相应的排除规则。

-keep
./oh_modules/@ohos/bottomsheet

目录结构

/bottomsheet        # 项目根目录
├── entry      # 示例代码文件夹
├── library    # bottomsheet库文件夹
│    └─ src/main/ets   # 核心代码
│                └─ components # 核心组件
│                   └─ BottomSheetComponent.ets   
│                   └─ BottomSheetController.ets
│                   └─ MenuSheetComponent.ets   
│                   └─ IntentPickerSheetComponent.ets   
│                   └─ ImagePickerSheetComponent.ets                 
├── README.md     # 安装使用方法    
├── README_zh.md  # 安装使用方法                    

贡献代码

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

开源协议

本项目遵循 BSD-3-Clause。