ionic4原生组件开发经验杂谈-以Action Sheet组件为例

 

目录

前言

 1.找到自己需要的组件

2.先抄了再说

3.对Demo的内容做简单修改

4.切换IOS/Android系统效果

5.更改组件样式(一通百通)

结语

---

 

 

前言

 

使用ionic开发时，经常会需要我们自己搞一个组件。无论是在ng-zorro还是ionic官网，找到合适的组件并不难，但是按照项目的需求灵活的运用组件难度就大起来了。个人认为，造成这件事最大的客观原因就是英文官网让许许多多的人读不下去。

我个人开发时使用到了Action Sheet，这个控件的样式我调了2天(单指这一个控件) ，虽然花费了不少时间，但是能为以后组件的运用积累经验，还是很值得的。

 

 

1.找到自己需要的组件

 

我在项目中需要实现如下功能，当点击一个按钮，下边栏上弹选项，点击不同的选项，实现不同的功能。在生活中，我使用过这个功能，但是我不知道它的名字是什么，于是我就开始在ionic官网，挨个组件的找。虽然官网会有不少组件，但是找到你需要的组件远没有你想的那么难。

当然，如果各位有更快捷找组件的方式，欢迎在本文下面评论，笔者由衷感谢您的指导与点拨。

(下图来自官网)

 

 

2.先抄了再说

 

Action Sheet控件的详细页面如下。我做的第一步先找到图片演示功能的源码，copy到自己的项目中，尝试运行观察运行效果。https://ionicframework.com/docs/api/action-sheet 

 

官网给出的代码如下(angular)

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'action-sheet-example',
  templateUrl: 'action-sheet-example.html',
  styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'arrow-dropright-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

}

 

 

照葫芦抄下来的效果如下，框架内容和官网一致，但是样式和第一步里的截图有出入。下面的步骤中我们会讨论。 

 

 

3.对Demo的内容做简单修改

 

结合上一步代码和运行效果，我们不难把Demo转化为项目。无非是修改一些名称，删除一些边边角角。简单修改后，效果如下

 

 

4.切换IOS/Android系统效果

 

 从ios系统的效果图与Android系统的效果图中，我们已经发现了它们之间不一样之处。对于大多数控件，能不能让android系统显示ios系统的效果呢？反之一样。答案当然是可以的。以ActionSheet控件为例，官网上给出了如下说明

 

具体怎么用呢？

 

 

看下效果

 

 

5.更改组件样式(一通百通)

 

主要就是这个效果卡了我两天。这个问题的关键是官网中提供了组件的样式cssClass，但我不知道该把样式写在哪里。

 

简单来说，具体的实现分两步：

• 第一步：先搞清控件的代码结构，在需要的位置写入cssClass=“自定义的样式名”，

 

 

• 第二步：下面的两个文件任选其一，写入具体的样式。为什么要在这里些，因为variables.scss的含义是设置全局的主题信息，global.scss的含义是设置全局的css文件。它们都必须是全局的，因为如果把样式写在其他SCSS目录下，会被官方自己封装的样式覆盖导致无效，只有在全局的样式中才可以。

我们任选一个，在里面写一些代码。

 

• 我们看下效果图

 

 

结语

 

当功能实现后，我不禁惊呼了出来。因为我发现我可以自定义官方组件的样式了！

笔者技术还不到家，文章就写到这里。感谢观看 ！