# adaptive

**Repository Path**: Pancake_Su/adaptive

## Basic Information

- **Project Name**: adaptive
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2024-10-16
- **Last Updated**: 2025-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# adaptive

## 简介

本项目是使用[adaptive_dialog](https://gitee.com/ohadss/adaptive/tree/master/adaptive_dialog)
和[adaptive_component](https://gitee.com/ohadss/adaptive/tree/master/adaptive_component)的示例代码，实现的是一个新闻详情页。
主要内容包括新闻的边看边评，拖动中间的分割线，自定义跟手弹窗等。

## 预览

![](./screenshots/adative.gif)

## 使用adaptive_component库的关键代码

1. 使用AdaptiveSplitContainer组件实现新闻详情页关键代码

``````
@State regionLayoutOptions: RegionLayoutOptions =
  {
    topBarHeight: 61,
    bottomBarHeight: 56,
    horizontalSplitRatio: PresetSplitRatio.LAYOUT_3V2,
    secondaryWidth: 0
  }
@State dividerOptions: DividerOptions = {
  dividerWidth: this.dividerWidth,
  offset: 0,
  leftMaxOffset: '10%',
  rightMaxOffset: '10%',
};
onDividerOffsetChangeHandler: OnDividerOffsetChangeHandler = (dividerOffset: number) => {
  hilog.info(0xFF00, 'NewsSplitContainer', '%{public}s', 'dividerOffset: ' + dividerOffset.toString());
}
onLayoutDirectionChangeHandler: OnLayoutDirectionChangeHandler = (layoutDirection: LayoutDirection) => {
  hilog.info(0xFF00, 'NewsSplitContainer', '%{public}s', 'layoutDirection: ' + layoutDirection.toString());
  this.layoutDirection = layoutDirection;
}
@State layoutDirection: LayoutDirection = LayoutDirection.UNDEFINED;

AdaptiveSplitContainer({
  topBar: () => {
    // 顶部导航栏自定义布局
  },
  bottomBar: () => {
    // 底部导航栏自定义布局
  },
  primary: () => {
    // 左边区域内容自定义布局
  },
  secondary: () => {
    // 右边区域内容自定义布局
  },
  regionLayoutOptions: this.regionLayoutOptions, // 布局参数
  dividerOptions: this.dividerOptions, // 分割线参数
  onDividerOffsetChangeHandler: this.onDividerOffsetChangeHandler, // 右边区域宽度回调函数
  onLayoutDirectionChangeHandler: this.onLayoutDirectionChangeHandler // 布局方向回调函数
})
``````

## 使用adaptive_dialog库的关键代码

1.警告弹窗 (AlertDialog)：

```
private showFollowAlertDialog(targetId: string) {
  const dialogId = DialogHelper.showAlertDialog({
    targetId: targetId,
    content: $r('app.string.dialog_content_concern'),
    primaryButton: {
      value: $r('app.string.dialog_cancel'),
      action: () => {
        DialogHelper.closeDialog(dialogId);
      }
    },
    secondaryButton: {
      value: $r('app.string.dialog_confirm'),
      action: () => {
        DialogHelper.closeDialog(dialogId);
      }
    }
  });
}
```

2.列表选择弹窗 (ActionSheet)

``````
private showActionSheet(targetId: string) {
  const dialogId = DialogHelper.showActionSheetDialog({
    targetId: targetId,
    title: $r('app.string.dialog_action_sheet_title'),
    subtitle: $r('app.string.dialog_action_sheet_subtitle'),
    sheets: [{
      icon: $r('app.media.view1'),
      title: $r('app.string.dialog_action_title_1'),
      action: () => {
        DialogHelper.closeDialog(dialogId);
      }
    }, {
      icon: $r('app.media.view2'),
      title: $r('app.string.dialog_action_title_2'),
      enabled: true,
      fontColor: Color.Red,
      action: () => {
        DialogHelper.closeDialog(dialogId);
      }
    }, {
      icon: $r('app.media.view3'),
      title: $r('app.string.dialog_action_title_3'),
      action: () => {
        DialogHelper.closeDialog(dialogId);
      }
    }]
  });
}
``````

3.自定义弹窗 (CustomDialog)

```
private showShareDialog(targetId: string) {
  const params: ShareDialogParams = {
    targetId: targetId,
    title: $r('app.string.dialog_share_title'),
    message: $r('app.string.dialog_share_message'),
    shareSheet: [{
      icon: $r('app.media.share_forward_btn'),
      tittle: $r('app.string.dialog_share_type_forward'),
      onAction: () => {
        DialogHelper.closeDialog(this.shareDialogId);
      }
    }, {
      icon: $r('app.media.share_recommend_btn'),
      tittle: $r('app.string.dialog_share_type_recommend'),
      onAction: () => {
        DialogHelper.closeDialog(this.shareDialogId);
      }
    }, {
      icon: $r('app.media.share_link_btn'),
      tittle: $r('app.string.dialog_share_type_link'),
      onAction: () => {
        DialogHelper.closeDialog(this.shareDialogId);
      }
    }, {
      icon: $r('app.media.share_popular_btn'),
      tittle: $r('app.string.dialog_share_type_hot'),
      onAction: () => {
        DialogHelper.closeDialog(this.shareDialogId);
      }
    }],
    cancel: () => {
      promptAction.showToast({ message: $r('app.string.toast_cancel_share'), duration: 2000 });
    },
    dialogOptions: {
      alignment: DialogAlignment.Bottom,
      offset: { dx: 0, dy: 0 },
      maskColor: Color.Transparent,
      transition: TransitionEffect.asymmetric(
        TransitionEffect.OPACITY.animation({ duration: 300, curve: Curve.Ease }).combine(
          TransitionEffect.translate({ y: 1000 }).animation({ duration: 300, curve: Curve.Ease })),
        TransitionEffect.OPACITY.animation({ duration: 300, curve: Curve.Ease }).combine(
          TransitionEffect.translate({ y: 1000 }).animation({ duration: 300, curve: Curve.Ease }))
      )
    }
  };
  this.shareDialogId = DialogHelper.showCustomViewDialog(wrapBuilder(ShareDialogBuilder), params);
}
```

## 工程目录

```
├── adaptive_dialog     # 自适应弹窗库
├── adaptive_component  # 自适应组件库
├── entry               # 工程项目
|      └── src
|           └── main
|                 ├── ets
|                 |  ├── constants
|                 |  |  └── CommonConstants.ets
|                 |  ├── entryability
|                 |  |  └── EntryAbility.ets
|                 |  ├── entrybackupability
|                 |  |  └── EntryBackupAbility.ets
|                 |  ├── pages
|                 |  |  ├── DialogPage.ets          # 弹窗按钮页面
|                 |  |  ├── Index.ets               # 首页
|                 |  |  └── SplitContainerPage.ets  # 新闻页面
|                 |  ├── utils
|                 |  |  ├── BreakpointSystem.ets
|                 |  |  └── BreakpointUtils.ets
|                 |  ├── view
|                 |  |  ├── NewsSplitContainer.ets  # 新闻详情页面
|                 |  |  └── ShareDialogView.ets     # 弹窗按钮详情页面
|                 |  └── viewmodel
|                 |     ├── CardViewModel.ets       # 新闻评论区信息
|                 |     └── ShareDialogParams.ets   # 弹窗内容参数
|                 ├── module.json5
|                 └── resources
├── README.md # 使用方法
```

## 相关权限

无特别权限要求

## 约束与限制

1. 本示例仅支持标准系统上运行，支持设备：华为手机、折叠机、平板。
2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
3. DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。