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控制每个局部视图的可见性。