Question

我在本机脚本中创建SegmentedBar。我能够创建段，但我无法将Label添加到段视图。

<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。这是一个例子。当您点击＆＃34; First＆＃34;，＆＃34; Second＆＃34;或＆＃34;第三＆＃34;按钮什么都不会发生。要按下按钮，您必须将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>

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

Answer 2

您可能知道HTTP_PROXY已创建，请记住在单页/视图中显示不同的页面/视图。因此，TabView主要用于导航到不同的视图。

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

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

正确使用SegmentedBar就是这样使用：

SegmentedBar

最后，使用<SegmentedBar> <SegmentedBar.items> <SegmentedBarItem title="Free" /> <SegmentedBarItem title="Paid" /> </SegmentedBar.items> </SegmentedBar>在单个页面中导航多个页面，并使用TabView在单个视图中查看不同的内容。

TabView与SegmentedBar

2 个答案: