Nativescript选项卡布局方法

Question

我正在尝试使用NativeScript创建一个具有以下布局的应用程序:

1. 行动吧
2. 中心的内容区域(约占屏幕高度的80%)
3. 固定菜单底部有4个按钮

我知道NativeScript提供了一个TabView,但是这个视图将菜单置于Android应用程序版本的顶部,并且不允许将图像用作"ItemTitle".

所以(我认为)这给我留下了两个选择:

• 创建4个不同的页面并在用户点击菜单按钮时加载它们

• 创建一个页面并根据用户选择更改内容

第一种方法很棒,因为我将所有xml,js和css文件分开.但是,在页面之间导航可能需要一些时间,并且不能提供理想的用户体验.第二种方法可能会有更好的用户体验,但代码将很难维护.

我应该使用哪个选项？有没有人处理类似的布局？ 感谢您的时间!

Answer 1

在我的应用程序中,我在每个选项卡项中使用带有部分视图的TabView.因此,对于每个选项卡视图,内容在它们自己的xml,js,css文件中分隔.

那么为什么不采用这种方法并将其与您的选项2结合起来呢？

您可以创建一个主视图:

• 动作条
• 部分视图的主要内容(Stack- og GridLayout)
• 底部的SegmentedBar用于导航按钮

当用户点击SegmentedBar上的按钮时,您可以更改相应局部视图的可见性.

你也可以使用任何字体图标作为标题的"图像" SegmentedBar.

更新:添加以下示例.

如何创建和引用部分视图

在主视图页面元素中添加对每个局部视图的引用,如下所示:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" 
xmlns:t1="partial-views/tab1" 
xmlns:t2="partial-views/tab2" 
xmlns:t3="partial-views/tab3">

每个局部视图由.xml,.js和.css文件组成.我喜欢将每个局部视图放在单独的文件夹中:tab1,tab2,tab3作为示例.

部分视图xml文件仅包含视图模块,不包含页面模块.所以不要在这里添加任何Page或ActionBar.局部视图.xml的示例:

<GridLayout loaded="viewLoaded">
  <ListView items="{{ someItemList }}">
   <ListView.itemTemplate>
     ...
    </ListView.itemTemplate>
  </ListView>
</GridLayout>

如何使用部分视图

现在,由您决定如何使用部分视图.以下是如何将它们与TabView组件一起使用的示例.这放在同一页面视图中,您在其中添加了第一个示例中的引用.

<TabView>
  <TabView.items>

    <TabViewItem title="Tab 1" iconSource="res://tab1">
        <TabViewItem.view>
            <t1:tab1 /> 
        </TabViewItem.view>
    </TabViewItem>

    <TabViewItem title="Tab 2" iconSource="res://tab2" >
        <TabViewItem.view>
            <t2:tab2 />
        </TabViewItem.view>
    </TabViewItem>

    <TabViewItem title="Tab 3" iconSource="res://tab3" >
        <TabViewItem.view>
            <t3:tab3 /> 
        </TabViewItem.view>
    </TabViewItem>

  </TabView.items>
</TabView>

或者,您可以在没有TabView的情况下执行此操作,并创建自定义内容:

<StackLayout>
  <t1:tab1 id="tab1" visibility="visible" /> 
  <t2:tab2 id="tab2" visibility="collapsed" /> 
  <t3:tab3 id="tab3" visibility="collapsed" /> 
</StackLayout>

<SegmentedBar selectedIndex="0" selectedIndexChanged="segBarSelected">
  <SegmentedBar.items>
    <SegmentedBarItem title="Tab 1" />
    <SegmentedBarItem title="Tab 2" />
    <SegmentedBarItem title="Tab 3" />
  </SegmentedBar.items>
</SegmentedBar>

因此,这将selectedIndexChanged控制每个局部视图的可见性.