HarmonyOS鸿蒙Next中有tabs在下面，带顶部导航栏的工程或者代码吗

@Entry
@Component
struct testDemo {
  build() {
    Column() {
      Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent(){
            Column(){
              Tabs({barPosition: BarPosition.Start}){
                // 顶部导航栏内容
                TabContent(){
                  Text('关注的内容')
                }
                .tabBar('关注')
                TabContent(){
                  Text('视频的内容')
                }
                .tabBar('视频')
                TabContent(){
                  Text('游戏的内容')
                }
                .tabBar('游戏')
                TabContent(){
                  Text('数码的内容')
                }
                .tabBar('数码')
                TabContent(){
                  Text('科技的内容')
                }
                .tabBar('科技')
              }
            }
            .width('100%')
          }
          .tabBar('首页')
          // 其他TabContent内容：发现、推荐、我的
          TabContent(){
            Text('发现的内容')
          }
          .tabBar('发现')
          TabContent(){
            Text('推荐的内容')
          }
          .tabBar('推荐')
          TabContent(){
            Text('我的内容')
          }
          .tabBar('我的')
        }
        .scrollable(false)
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中有tabs在下面，带顶部导航栏的工程或者代码吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼•7 天前

在HarmonyOS鸿蒙Next中，您可以通过使用Tabs组件和NavigationContainer来实现带有顶部导航栏和底部标签栏的页面布局。Tabs组件用于创建底部标签栏，而NavigationContainer则用于管理顶部导航栏。

以下是一个简单的示例代码，展示了如何在HarmonyOS鸿蒙Next中实现这种布局：

import { Tabs, TabContent, NavigationContainer, NavigationStack, NavigationScreen } from '@ohos/harmonyos';

const tabs = new Tabs();
const navigationContainer = new NavigationContainer();

// 创建底部标签栏
tabs.addTab('Home', () => {
    return new TabContent('Home', () => {
        return new NavigationScreen('HomeScreen', () => {
            // 首页内容
        });
    });
});

tabs.addTab('Profile', () => {
    return new TabContent('Profile', () => {
        return new NavigationScreen('ProfileScreen', () => {
            // 个人资料页内容
        });
    });
});

// 设置导航容器
navigationContainer.setRootStack(new NavigationStack([
    new NavigationScreen('Main', () => {
        return tabs;
    })
]));

// 渲染页面
navigationContainer.render();

在这个示例中，Tabs组件用于创建底部标签栏，每个标签对应一个TabContent，而TabContent中则包含一个NavigationScreen，用于显示具体页面内容。NavigationContainer用于管理顶部导航栏，并通过NavigationStack来管理页面堆栈。

通过这种方式，您可以在HarmonyOS鸿蒙Next中实现带有顶部导航栏和底部标签栏的页面布局。

gougou168 3楼•7 天前

在HarmonyOS鸿蒙Next中，你可以使用TabList和Tab组件来实现底部标签栏，同时结合Navigation组件实现顶部导航栏。以下是一个简单的代码示例：

import { TabList, Tab, Navigation, Page } from '@ohos/harmonyos';

class MyApp extends Page {
  build() {
    return (
      <Column>
        <Navigation title="顶部导航栏" />
        <TabList>
          <Tab label="首页" />
          <Tab label="设置" />
        </TabList>
      </Column>
    );
  }
}

这段代码创建了一个带有顶部导航栏和底部标签栏的页面。你可以根据需要进一步自定义样式和功能。