Ionic—动态样式与夜间模式

版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/85220639

一.夜间模式的布局实现

1.开发设计

• 夜间模式的切换其实就是css样式表的切换

• 添加主题文件theme[theme.light.scss和theme.dark.scss]

• 创建providers实现主题的切换ionic g provider settings

• rxjs中的BehaviorSubject用于行为管理，可以用来切换主题，使用方式如下

  • 创建样式主题

    this.theme = new BehaviorSubject('light-theme');
    

  • 设置主题方法

    setActiveTheme(val){
        this.theme.next(val);
    }
    

  • 获得当前主题

    getActiveTheme() {
        return this.theme.asObservable();
    }
    

2.实例代码

• theme.light.scss

  .light-theme {
    ion-content {
        background-color: #e3e4e7
      }
      
      .toolbar-background {
        background-color: #fff;
      }
    .marginBottom0 {
      margin-bottom: 0!important;
    }
  }
  

• theme.dark.scss

  .dark-theme {
    ion-content,.card,.floatMenu {
      background-color: #1e2446 !important;
      color: #fff !important;
    }
  
    .toolbar-title {
      color: #fff !important;
    }
   
    .header .toolbar-background {
      border-color: #140414 !important;
      background-color: #3a3c4b !important;
    }
  
    .list,.label,.item{
      background-color: #3a3c4b !important;
      color:#FFFFFF !important;
    }
    .item{
      border-bottom: 0.55px solid #2e2749 !important;
    }
    .item-inner,{
      border: none !important;
    }
    .item-block{
      border-bottom: 0.55px solid #2e2749 !important;
    }
  }
  

• variables.scss添加内容

  //导入你自定义的样式
  //这里导入的是两套主题样式
  @import "theme.light";
  @import "theme.dark";
  

• more.html

  <ion-header>
    <ion-navbar>
      <ion-title>更多</ion-title>
    </ion-navbar>
  </ion-header>
  
  <ion-content>
    <div *ngIf="!isLogined">
      <ion-card>
        <ion-card-header text-center>
          Log in 'Free Skin' and experience more features...
        </ion-card-header>
        <ion-card-content text-center>
          <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button>
        </ion-card-content>
      </ion-card>
    </div>
    <div *ngIf="isLogined">
      <ion-list class="marginTop0px">
        <button ion-item (click)="editUserInfo()">
          <ion-avatar item-start>
            <img [src]="avatarUrl">
          </ion-avatar>
          <h2>
            {{userName}}
          </h2>
          <p>Click to edit your user info</p>
        </button>
      </ion-list>
  
      <ion-list class="marginTop10px">
        <ion-list-header>
          我的信息
        </ion-list-header>
        <button ion-item (click)="gotoDataList('question')">
          <!-- 使用color属性也可以给icon添加颜色,color中的值在theme中定义,可以直接给定颜色 -->
          <ion-icon name="paper" item-start color="primary"></ion-icon>
          <ion-label>我的直播</ion-label>
        </button>
        <button ion-item (click)="gotoDataList('favourite')">
          <ion-icon name="star" item-start color="orange"></ion-icon>
          <ion-label>我的关注</ion-label>
        </button>
        <button ion-item (click)="gotoDataList('answer')">
          <ion-icon name="disc" item-start color="secondary"></ion-icon>
          <ion-label>我的护肤</ion-label>
        </button>
      </ion-list>
  
      <ion-list class="marginTop10px">
        <ion-list-header>
          个人设置
        </ion-list-header>
        <ion-item>
          <ion-icon name="cloudy-night" item-start color="purple"></ion-icon>
          <ion-label>夜间模式</ion-label>
          <!-- 左右切换小按钮 -->
          <ion-toggle color="purple"></ion-toggle>
        </ion-item>
      </ion-list>
    </div>
  </ion-content>
  

• settings.ts

  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/Rx';
  
  @Injectable()
  export class SettingsProvider {
  
    //BehaviorSubject用于行为管理
    private theme: BehaviorSubject<string>;
  
    constructor(public http: HttpClient) {
      this.theme = new BehaviorSubject('light-theme');
    }
  
    //设置当前主题
    setActiveTheme(val){
      this.theme.next(val);
    }
  
    //获得当前主题
    getActiveTheme() {
      return this.theme.asObservable();
    }
  
  }
  

二.夜间模式的功能实现

1.开发设计

• 在app.component上监听(subscribe)settingsProvider,并获取当前theme主题并赋值给组件属性中，从而绑定html中全局样式是theme.light还是theme.dark
• 给more页面的ion-toggle绑定ionChange事件从而实现切换样式时触发provider的主题切换，因为app.component监听主题切换了，故实现点击切换选项时实现主题的变换

2.实例代码

• app.component.ts

  import { Component } from '@angular/core';
  import { Platform } from 'ionic-angular';
  import { StatusBar } from '@ionic-native/status-bar';
  import { SplashScreen } from '@ionic-native/splash-screen';
  
  import { TabsPage } from '../pages/tabs/tabs';
  import { SettingsProvider } from '../providers/settings/settings';
  
  @Component({
    templateUrl: 'app.html'
  })
  export class MyApp {
    rootPage:any = TabsPage;
  
    //当前的主题
    selectedTheme:string='';
  
    constructor(
      platform: Platform, 
      statusBar: StatusBar, 
      splashScreen: SplashScreen,
      settings: SettingsProvider) {
      //监听主题的变换并切换当前值
      settings.getActiveTheme().subscribe(val=>{
        this.selectedTheme = val;
      });
      platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        statusBar.styleDefault();
        splashScreen.hide();
      });
    }
  }
  

• app.html

  <ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>
  

• more.ts

  import { Component } from '@angular/core';
  import { NavController, NavParams, ModalController, LoadingController, ToastController } from 'ionic-angular';
  import { LoginPage } from '../login/login';
  import { Storage } from '@ionic/storage';
  import { BaseUI } from '../../common/baseUI';
  import { UserPage } from '../user/user';
  import {UserdatalistPage} from '../userdatalist/userdatalist';
  import { SettingsProvider } from '../../providers/settings/settings';
  
  @Component({
    selector: 'page-more',
    templateUrl: 'more.html',
  })
  export class MorePage extends BaseUI{
  
    //判断是否登录
    isLogined:boolean = false;
  
    //avatar url
    avatarUrl:string = "../../assets/imgs/logo.png";
    //user name
    userName:string = "Jack_Wangzhe";
  
    //当前主题
    selectedTheme:string;
  
    constructor(
      public navCtrl: NavController, 
      public navParams: NavParams,
      public modalCtrl: ModalController,
      public loadingCtrl:LoadingController,
      public toastCtrl:ToastController,
      public storage: Storage,
      public settings: SettingsProvider) {
        super();
        //监听获得当前主题
        this.settings.getActiveTheme().subscribe(val=>{
          this.selectedTheme = val;
        });
    }
  
    presentLoginModal() {
      const modal = this.modalCtrl.create(LoginPage);
      modal.onDidDismiss(()=>{
        this.loadUserPage();
      })
      modal.present();
    }
  
    //ionic生命周期方法：当页面进入完成后调用
    ionViewDidEnter() {
      this.loadUserPage();
    }
  
    //加载用户信息
    loadUserPage() {
      this.storage.get('token').then((val)=>{
        if(val!=null){
          this.isLogined = true;
          let loading = super.showLoading(this.loadingCtrl,"Loading...");
          setTimeout(()=>{
            this.avatarUrl = "../../assets/imgs/avatar.jpg"+"?"+(new Date());
            this.userName = "Jack";
            loading.dismiss();
          },2000);
        }else{
          this.isLogined = false;
        }
      })
    }
  
    //跳转到用户详情页面
    editUserInfo() {
      this.navCtrl.push(UserPage);
    }
  
    //跳转到数据列表页面
    gotoDataList(type) {
      this.navCtrl.push(UserdatalistPage,{"dataType":type});
    }
  
    //切换主题
    toggleChangeTheme() {
      if(this.selectedTheme === 'dark-theme'){
        this.settings.setActiveTheme('light-theme');
      }else{
        this.settings.setActiveTheme('dark-theme');
      }
    }
  }
  

• more.html

  <ion-header>
    <ion-navbar>
      <ion-title>更多</ion-title>
    </ion-navbar>
  </ion-header>
  
  <ion-content>
    <div *ngIf="!isLogined">
      <ion-card>
        <ion-card-header text-center>
          Log in 'Free Skin' and experience more features...
        </ion-card-header>
        <ion-card-content text-center>
          <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button>
        </ion-card-content>
      </ion-card>
    </div>
    <div *ngIf="isLogined">
      <ion-list class="marginTop0px">
        <button ion-item (click)="editUserInfo()">
          <ion-avatar item-start>
            <img [src]="avatarUrl">
          </ion-avatar>
          <h2>
            {{userName}}
          </h2>
          <p>Click to edit your user info</p>
        </button>
      </ion-list>
  
      <ion-list class="marginTop10px">
        <ion-list-header>
          我的信息
        </ion-list-header>
        <button ion-item (click)="gotoDataList('question')">
          <!-- 使用color属性也可以给icon添加颜色,color中的值在theme中定义,可以直接给定颜色 -->
          <ion-icon name="paper" item-start color="primary"></ion-icon>
          <ion-label>我的直播</ion-label>
        </button>
        <button ion-item (click)="gotoDataList('favourite')">
          <ion-icon name="star" item-start color="orange"></ion-icon>
          <ion-label>我的关注</ion-label>
        </button>
        <button ion-item (click)="gotoDataList('answer')">
          <ion-icon name="disc" item-start color="secondary"></ion-icon>
          <ion-label>我的护肤</ion-label>
        </button>
      </ion-list>
  
      <ion-list class="marginTop10px">
        <ion-list-header>
          个人设置
        </ion-list-header>
        <ion-item>
          <ion-icon name="cloudy-night" item-start color="purple"></ion-icon>
          <ion-label>夜间模式</ion-label>
          <!-- 左右切换小按钮 -->
          <ion-toggle color="purple" (ionChange)="toggleChangeTheme()"></ion-toggle>
        </ion-item>
      </ion-list>
    </div>
  </ion-content>