TabView与SegmentedBar [英] TabView vs SegmentedBar

问题描述

我正在用本机脚本创建SegmentedBar.我可以创建细分，但不能将Label添加到细分视图.

I am creating SegmentedBar in native script. I am able to create segments but I am not able to add Label to segment view.

<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之间的区别是什么?

What is the difference between SegmentedBar and TabView as both appear same.

推荐答案

分段栏为

分段控件是由多个分段组成的水平控件， 每个段都充当一个离散按钮.

A segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.

因此基本上:分段条形图是几个按钮(在视觉上)彼此连接的按钮.只需将它们视为具有特定外观的按钮即可.

So basically: A Segmented Bar is a couple of buttons (visually) connected to each other. Just think of them like buttons with a specific look.

TabView则是选项卡(您单击的项目)以及每个选项卡的关联视图.

A TabView on the other hand the tabs (the items you click) and a connected view to each tab.

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

What you're doing in your code is that you're trying to combine mechanics of the TabView with the SegmentedBar.

看看这两个代码示例.

首先是SegmentedBar.这是一个例子.当您单击第一"，第二"或第三"按钮时，将不会发生任何事情.要对按钮做出反应，您必须将selectedIndex绑定到可观察对象属性，然后在 propertyChange事件上进行逻辑处理. /p>

First, the SegmentedBar. Here is an example. When you click the "First", "Second" or "Third" button nothing will happen. To react on a button press you've to bind the selectedIndex to an Observable object property and do your logic in the on the propertyChange event.

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

另一方面，TabView由两部分组成:选项卡本身(您按的内容)和连接到每个选项卡的视图.因此，当您点击标签页时，视图就会改变.

The TabView, on the other hand, consist of two things, the tabs themselves (the things you press) and a View connected to each tab. So when you click a tab the view gets changed.

 <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用于实际要显示整个新视图的地方.

These two components are used for different things. E.g. for filtering a list (show all mails, show only unread mails...) you usually use the segmented bar as you don't want to change the view - you want to change the content of the view. The TabView is used for when you actually want to display a whole new view.

这篇关于TabView与SegmentedBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！