1

我在本机脚本中创建 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 之间有什么区别，因为两者看起来相同。

4

2 回答 2

1

苹果对分段条进行了很好的描述：

分段控件是由多个分段组成的水平控件，每个分段用作一个离散按钮。

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

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

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

看看这两个代码示例。

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

<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>

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

于 2015-08-14T08:59:35.450 回答
0

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

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

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

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

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

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

于 2017-03-21T08:52:37.200 回答