Nativescript 选项卡布局方法

Question

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

在顶部，操作栏
内容区域居中（约占屏幕高度的 80%）
修复了底部有 4 个按钮的菜单

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

所以（我认为）这让我有两个选择：

创建 4 个不同的页面并在用户点击菜单时加载它们按钮
创建单个页面并根据用户更改内容选择

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

我应该使用哪个选项？你们中有人处理过类似的布局吗？ 感谢您的宝贵时间！

Answer 1

在我的应用程序中，我在每个 tab-item 中使用带有 partial-views 的 TabView。因此，对于每个 tab-view，内容在它们自己的 xml、js、css 文件中分开。

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

您可以创建一个 main-view：

动作条
居中 main-content partial-views (Stack- og GridLayout)
导航按钮底部的 SegmentedBar

当用户点击 SegmentedBar 上的按钮时，您更改相应 partial-view 的可见性。

您也可以在 SegmentedBar 中使用任何 font-icons 作为您的标题 "images"。

更新：在下面添加了示例。

如何创建和引用partial-views

在您的 main-view Page-element 中添加对每个局部视图的引用，如下所示：

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

partial-view xml 文件将只包含 view-modules，不包含 page-modules。所以不要在此处添加任何 Page 或 ActionBar。部分视图示例 .xml:

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

如何使用partial-views

现在，由您决定如何使用 partial-views。这是一个关于如何将它们与 TabView 组件一起使用的示例。这与您添加第一个示例中的引用的位置相同 page-view。

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

Nativescript 选项卡布局方法

Nativescript tab layout approach

nativescript