新手求教：如何使用Ionic 3与Split Pane组件实现主从布局？

嘿，作为Ionic 3新手，用Split Pane实现主从布局其实很直观，我给你整理了一套能直接运行的完整方案，一步步来就行～

Split Pane是Ionic专门用来适配大屏/小屏的组件——大屏（平板、桌面）下会同时展示主列表（侧边栏）和详情内容区，小屏（手机）下则自动切换成侧边栏滑出、内容区单独显示的模式，完美契合主从布局的需求。

步骤1：创建基础项目（如果还没搭建的话） #

先创建一个带侧边栏模板的Ionic项目，省去从零写侧边栏的麻烦：

ionic start splitPaneDemo sidemenu --type=ionic-angular
cd splitPaneDemo

步骤2：修改根组件模板（app.html） #

这是实现分栏的核心，用<ion-split-pane>包裹侧边栏和内容区：

<ion-split-pane when="(min-width: 768px)">
  <!-- 主列表：侧边栏展示联系人列表 -->
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>联系人列表</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item 
          *ngFor="let contact of contacts" 
          (click)="openDetail(contact)"
        >
          <ion-avatar item-start>
            <img [src]="contact.avatar">
          </ion-avatar>
          <h2>{{contact.name}}</h2>
          <p>{{contact.email}}</p>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- 详情内容区：展示选中联系人的详情 -->
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>

关键说明：

• when="(min-width: 768px)"：指定屏幕宽度≥768px时自动启用分栏，也可以用md（仅安卓/桌面环境）或sm（小屏以上）简化配置。
• 侧边栏用<ion-menu>实现，内容区用<ion-nav>承载详情页。

步骤3：修改根组件逻辑（app.component.ts） #

定义联系人数据，实现点击列表跳转详情的逻辑：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ContactDetailPage } from '../pages/contact-detail/contact-detail';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = ContactDetailPage;
  // 模拟联系人数据
  contacts = [
    {
      id: 1,
      name: '张三',
      email: 'zhangsan@example.com',
      avatar: 'https://ui-avatars.com/api/?name=张三&background=random',
      phone: '13800138000',
      address: '北京市朝阳区'
    },
    {
      id: 2,
      name: '李四',
      email: 'lisi@example.com',
      avatar: 'https://ui-avatars.com/api/?name=李四&background=random',
      phone: '13900139000',
      address: '上海市浦东新区'
    },
    {
      id: 3,
      name: '王五',
      email: 'wangwu@example.com',
      avatar: 'https://ui-avatars.com/api/?name=王五&background=random',
      phone: '13700137000',
      address: '广州市天河区'
    }
  ];

  constructor(public navCtrl: NavController) {
    // 默认加载第一个联系人的详情
    this.navCtrl.setRoot(ContactDetailPage, { contact: this.contacts[0] });
  }

  // 点击列表项，跳转到对应联系人详情
  openDetail(contact: any) {
    this.navCtrl.setRoot(ContactDetailPage, { contact });
  }
}

步骤4：创建并配置详情页 #

先生成详情页组件：

ionic generate page contact-detail

修改详情页模板（contact-detail.html） #

展示选中联系人的详细信息，同时适配大屏/小屏的菜单按钮显示：

<ion-header>
  <ion-navbar>
    <ion-title>{{contact?.name}}</ion-title>
    <!-- 小屏显示菜单按钮，大屏隐藏（因为侧边栏已固定显示） -->
    <button ion-button menuToggle *ngIf="!isSplitPaneActive">
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card *ngIf="contact">
    <ion-card-header>
      <ion-avatar>
        <img [src]="contact.avatar">
      </ion-avatar>
      <h2>{{contact.name}}</h2>
    </ion-card-header>
    <ion-card-content>
      <p><strong>邮箱：</strong>{{contact.email}}</p>
      <p><strong>电话：</strong>{{contact.phone}}</p>
      <p><strong>地址：</strong>{{contact.address}}</p>
    </ion-card-content>
  </ion-card>
  <!-- 无选中联系人时的空状态 -->
  <p *ngIf="!contact" class="empty-tip">请从左侧选择联系人查看详情</p>
</ion-content>

修改详情页逻辑（contact-detail.ts） #

接收根组件传递的联系人数据，判断当前是否处于分栏状态：

import { Component } from '@angular/core';
import { NavParams, Platform } from 'ionic-angular';

@Component({
  selector: 'page-contact-detail',
  templateUrl: 'contact-detail.html',
})
export class ContactDetailPage {
  contact: any;
  isSplitPaneActive: boolean;

  constructor(
    public navParams: NavParams,
    public platform: Platform
  ) {
    // 获取根组件传递的联系人数据
    this.contact = navParams.get('contact');
    // 监听屏幕尺寸变化，更新分栏状态
    this.platform.resize.subscribe(() => {
      this.isSplitPaneActive = this.platform.width() >= 768;
    });
    // 初始化分栏状态
    this.isSplitPaneActive = this.platform.width() >= 768;
  }
}

步骤5：运行测试 #

启动项目后，调整浏览器窗口大小就能看到效果：

ionic serve

• 窗口宽度≥768px：侧边栏和详情页同时显示，点击列表项实时更新详情
• 窗口宽度<768px：侧边栏隐藏，点击顶部菜单按钮滑出列表，选择后返回详情页

内容的提问来源于stack exchange，提问作者Chaitra R