Question

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

在顶部，操作栏
中心的内容区域（约占屏幕高度的80％）
底部带有4个按钮的固定菜单

我知道NativeScript提供了一个TabView，但是这个视图将菜单放在Android应用程序版本的顶部，并且不允许使用图像作为＆＃34; ItemTitle＆＃34; < /强>

所以（我认为）这给我留下了两个选择：

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

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

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

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

Answer 1

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

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

您可以使用以下命令创建主视图：

动作条
以局部视图为中心的主要内容（Stack- og GridLayout）
底部的SegmentedBar用于导航按钮

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

您可以使用任何字体图标作为＆＃34;图像＆＃34;对于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将控制每个局部视图的可见性。

Nativescript选项卡布局方法

1 个答案: