【Ionic】Segment（分割）方法翻译及简介

本文探讨了Ionic框架中Segments与Tabs的使用场景及其差异。Segments适用于在同一页面内切换不同内容区块，而Tabs则用于在多个独立页面间导航。文章通过实例展示了如何使用Angular的ngModel和FormBuilder来实现这些交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ion-segment

A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls. Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app. You could use Angular’s ngModel or FormBuilder API. For an overview on how FormBuilder works, checkout Angular Forms, or Angular FormBuilder
一个Segment 是一组按钮，有时被当做分割控制；这会允许使用者与一组控制紧密联系；Segments提供类似tabs的强大功能，选择其中一个，其他的都不会被选中（ps：这一点有点类似radio）。在你app中，当你希望使用者滑动并且不同的页面间向前，你必须使用一个tab条而不是一个分割控制；你可以使用Angular的ngModel或者FormBuilder接口。概括性地说FormBuilder如何工作，检查Angular Forms或者Angular FormBuilder;

<!-- Segment in a header -->
<ion-header>
  <ion-toolbar>//工具条
    <ion-segment [(ngModel)]="icons" color="secondary">
      <ion-segment-button value="camera">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="bookmark">
        <ion-icon name="bookmark"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Segment in content -->
  <ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="friends">
      Friends
    </ion-segment-button>
    <ion-segment-button value="enemies">
      Enemies
    </ion-segment-button>
  </ion-segment>

  <!-- Segment in a form -->
  <form [formGroup]="myForm">
    <ion-segment formControlName="mapStyle" color="danger">
      <ion-segment-button value="standard">
        Standard
      </ion-segment-button>
      <ion-segment-button value="hybrid">
        Hybrid
      </ion-segment-button>
      <ion-segment-button value="sat">
        Satellite
      </ion-segment-button>
    </ion-segment>
  </form>
</ion-content>

①tabs和segments的区别是：tabs是在手机app下面的各个页面，就像微信里面有4个tabs，也就是4个页面：【聊天】，【联系人】，【朋友圈】，【我】；支付宝里面有【首页】，【口碑】，【朋友】，【我的】:
这里写图片描述
而segment是在同一个页面的不同分割，是在同一个页面里面的不同分割；例如下面的网易云音乐中蓝色框框住的【音乐】，【视频】，【电台】的类似3个segment，你左右滑动屏幕，会依次从【音乐】滑到【视频】，再滑到【电台】：
这里写图片描述