Подход к макету вкладок Nativescript

В моем приложении я использую TabView с частичными представлениями в каждом элементе вкладки. Таким образом, для каждой вкладки содержимое разделяется на собственные файлы xml, js, css.

Так почему бы просто не использовать этот подход и не объединить его со вторым вариантом?

Вы можете создать основной вид с помощью:

• Панель действий
• Центральный основной контент для частичных представлений (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-файл частичного просмотра будет содержать только модули просмотра, а не модули страниц. Так что не добавляйте сюда никакую страницу или панель действий. Пример частичного представления .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контролировать видимость каждого частичного представления.