TabView 与 SegmentedBar

Question

我正在本地脚本中创建 SegmentedBar。我可以创建细分，但无法将标签添加到细分视图。

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
      <SegmentedBar>
          <SegmentedBar.items>

              <SegmentedBarItem title="Segment 1">
                  <SegmentedBarItem.view>                      
                      <Label text=" I am in segment bar 1"/>
                  </SegmentedBarItem.view>
              </SegmentedBarItem>

              <SegmentedBarItem title="Segment 2">
                  <SegmentedBarItem.view>
                    <Label text=" I am in segment bar 2"/>
                  </SegmentedBarItem.view>
              </SegmentedBarItem>

          </SegmentedBar.items>
      </SegmentedBar>
  </StackLayout>    
</Page>

SegmentedBar 和 TabView 看起来一样，有什么区别。

Answer 1

分段条为described in a good way by Apple：

分段控件是由多个分段组成的水平控件， 每个部分都充当一个独立的按钮。

所以基本上：分段条是几个按钮（视觉上）相互连接。只需将它们视为具有特定外观的按钮即可。

另一方面，一个 TabView 是选项卡（您单击的项目）和每个选项卡的连接视图。

您在代码中所做的是尝试将 TabView 的机制与 SegmentedBar 结合起来。

看看这两个代码示例。

首先，SegmentedBar。这是一个例子。当您单击“第一”、“第二”或“第三”按钮时，不会发生任何事情。要对按钮做出反应，您必须将 selectedIndex 绑定到 Observable object 属性并在 propertyChange event 上执行您的逻辑。

<SegmentedBar selectedIndex="{{ selectedIndex }}">
    <SegmentedBar.items>
        <SegmentedBarItem title="First" />
        <SegmentedBarItem title="Second" />
        <SegmentedBarItem title="Third" />
    </SegmentedBar.items>
</SegmentedBar>

另一方面，TabView 由两部分组成，选项卡本身（您按下的东西）和连接到每个选项卡的视图。因此，当您单击选项卡时，视图会发生变化。

 <TabView>
   <TabView.items>
     <TabViewItem title="Tab 1">
       <TabViewItem.view>
          <Label text="Label in Tab1" />
       </TabViewItem.view>
     </TabViewItem>
     <TabViewItem title="Tab 2">
       <TabViewItem.view>
          <Label text="Label in Tab2" />
       </TabViewItem.view>
     </TabViewItem>
   </TabView.items>
 </TabView>

这两个组件用于不同的事情。例如。过滤列表（显示所有邮件，仅显示未读邮件...）您通常使用分段栏，因为您不想更改视图 - 您想更改视图的 content .当您真正想要显示一个全新的视图时使用 TabView。

Answer 2

您可能知道创建<TabView> 时要牢记在单个页面/视图中显示不同的页面/视图。因此，TabView 主要用于导航到不同的视图。

SegmentedBar 是为不同目的而创建的。这可以在具有不同功能的视图中使用，例如您可以将内容/产品分类为免费、付费。您希望在免费视图和付费视图上展示不同的产品功能、服务。因此，您可以使用SegmentedBar 为用户显示不同的选项。

所以，现在您知道TabView 和SegmentedBar 之间的区别了。

SegmentedBar的正确用法是这样使用：

<SegmentedBar>
  <SegmentedBar.items>
    <SegmentedBarItem title="Free" />
    <SegmentedBarItem title="Paid" />
  </SegmentedBar.items>
</SegmentedBar>

总之，使用TabView 在单个页面中导航多个页面，使用SegmentedBar 在单个视图中查看不同内容。