Ionic Angular中如何将两个列表组件并排显示？

问题根源 #

直接用无样式div包裹后列表消失，核心原因是CDK虚拟滚动视口（cdk-virtual-scroll-viewport）需要明确的高度才能渲染内容，无样式div没有设置高度，导致虚拟滚动视口无法获取可视区域尺寸，进而不渲染列表项。同时，Ionic组件需要适配框架的布局上下文，直接用div容易破坏布局流。

适配Ionic的解决方案 #

使用Ionic内置的**网格系统（ion-grid/ion-row/ion-col）**实现并排布局，同时给虚拟滚动视口设置明确高度：

1. 修改页面模板代码 #

<ion-content [fullscreen]="true" [scrollY]="false">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Match Title (Content)</ion-title>
    </ion-toolbar>
  </ion-header>

  <!-- 使用Ionic网格实现并排布局 -->
  <ion-grid class="full-height-grid">
    <ion-row>
      <!-- 左侧占6列，响应式适配小屏幕自动堆叠 -->
      <ion-col sizeMd="6" class="scroll-container">
        <mmm-facet-menu></mmm-facet-menu>
      </ion-col>
      <!-- 右侧占6列 -->
      <ion-col sizeMd="6" class="scroll-container">
        <mmm-species></mmm-species>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

2. 添加页面级CSS #

.full-height-grid {
  height: 100%;
  /* 按需移除网格默认padding，避免内容留白过大 */
  --ion-grid-padding: 0;
}

.scroll-container {
  height: 100%;
  /* 给容器添加内边距，让列表内容不贴边 */
  padding: 16px;
}

3. 组件内部调整（核心步骤） #

在mmm-facet-menu和mmm-species组件的模板中，给cdk-virtual-scroll-viewport设置明确高度：

<!-- 组件内部模板示例 -->
<cdk-virtual-scroll-viewport itemSize="50" class="virtual-scroll-viewport">
  <ion-list>
    <!-- 列表项内容 -->
  </ion-list>
</cdk-virtual-scroll-viewport>

对应的组件CSS：

.virtual-scroll-viewport {
  height: 100%;
}

关键说明 #

• Ionic网格系统能自动适配不同屏幕尺寸，符合框架样式规范，避免自定义div的布局冲突。
• ion-content的scrollY="false"必须保留，让两个虚拟滚动视口各自处理内部滚动，避免整体滚动冲突。
• 给虚拟滚动视口设置height: 100%是核心，这样它能继承父容器（ion-col）的高度，从而正常渲染列表内容。

内容的提问来源于stack exchange，提问作者Paul Hill