第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:TabBar和Navbar实现页面切换

传奇开心果短博文系列

  • 系列短博文目录
    • 鸿蒙开发技术点案例示例短博文系列
  • 短博文目录
    • 一、前言
    • 二、给Index.ets添加TabBar组件
    • 三、用TabBar组件实现页面切换
    • 四、给Index.ets添加Navbar组件
    • 五、使用Navbar独立实现页面切换
    • 六、Navbar和TabBar同时在Index.ets主页实现各自独立的页面切换

系列短博文目录

鸿蒙开发技术点案例示例短博文系列

短博文目录

一、前言

除了前面页面路由实现页面切换,使用组件TabBar和Navbar也能实现页面切换。搭配使用可以更加灵活多样的实现页面切换。

二、给Index.ets添加TabBar组件

第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:TabBar和Navbar实现页面切换_第1张图片以下是在给定代码中添加TabBar的示例:

//装饰器,指页面入口。
@Entry
//装饰器,指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器,指状态变量,字符串类型,赋值:"Hello World'
  @State message: string = "Hello World";
  //装饰器,指状态变量,整数类型,赋值:0
  @State selectedIndex: number = 0;

  //构造函数,UI声明
  build() {
    //垂直布局组件
    Column() {
      //TabBar组件
      TabBar(
        //绑定选中索引
        selectedIndex: this.selectedIndex,
        //回调函数,处理选项卡切换事件
        onTabChanged: (index) {
          this.selectedIndex = index;
        },
      ) {
        //Tab项1
        TabItem(
          //设置图标
          icon: Icon(Icons.home),
          //设置文本
          text: 'Home',
        );
        //Tab项2
        TabItem(
          //设置图标
          icon: Icon(Icons.settings),
          //设置文本
          text: 'Settings',
        );
      }
      //根据选中索引渲染对应的内容
      if (this.selectedIndex == 0) {
        //横向布局组件
        Row() {
          //嵌套纵向布局组件
          Column() {
            //文本组件,参数
            Text(this.message)
              //设置字号
              .fontSize(50)
              //设置字体粗细
              .fontWeight(FontWeight.Bold);
          }
          //设置页面宽度占比百分比
          .width('100%');
        }
      } else if (this.selectedIndex == 1) {
        //横向布局组件
        Row() {
          //嵌套纵向布局组件
          Column() {
            //文本组件,参数
            Text('Settings')
              //设置字号
              .fontSize(50)
              //设置字体粗细
              .fontWeight(FontWeight.Bold);
          }
          //设置页面宽度占比百分比
          .width('100%');
        }
      }
    }
    //设置页面高度占比百分比
    .height('100%');
  }
}

在给定的代码中,我们添加了一个TabBar组件,用于切换不同的内容。首先,在构造函数中添加了一个selectedIndex状态变量,用于跟踪当前选中的Tab项。然后,在Column布局组件中添加了TabBar组件,并将selectedIndex绑定到选中索引上,并通过onTabChanged回调函数处理选项卡切换事件。接下来,在TabBar中添加了两个TabItem,分别代表"Home"和"Settings"两个选项卡。根据selectedIndex的值,我们在Column布局组件中渲染不同的内容。如果selectedIndex为0,则渲染显示"Home"的内容;如果selectedIndex为1,则渲染显示"Settings"的内容。

请注意,这只是一个简单示例,实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时,您可能还需要根据具体框架或库的要求进行相应的调整和修改。

三、用TabBar组件实现页面切换

以下是一个示例代码,演示如何使用TabBar切换不同的页面:

//装饰器,指页面入口。
@Entry
//装饰器,指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器,指状态变量,整数类型,赋值:0
  @State selectedIndex: number = 0;

  //构造函数,UI声明
  build() {
    //垂直布局组件
    Column() {
      //TabBar组件
      TabBar(
        //绑定选中索引
        selectedIndex: this.selectedIndex,
        //回调函数,处理选项卡切换事件
        onTabChanged: (index) {
          this.selectedIndex = index;
        },
      ) {
        //Tab项1
        TabItem(
          //设置文本
          text: 'Page 1',
        );
        //Tab项2
        TabItem(
          //设置文本
          text: 'Page 2',
        );
      }
      //根据选中索引渲染对应的页面
      if (this.selectedIndex == 0) {
        //页面1
        Page1();
      } else if (this.selectedIndex == 1) {
        //页面2
        Page2();
      }
    }
  }
}

//自定义组件,页面1
struct Page1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件,页面2
struct Page2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

在给定的代码中,我们添加了两个自定义组件Page1和Page2,分别表示两个不同的页面。在Index组件的build方法中,根据selectedIndex的值来渲染不同的页面。当selectedIndex为0时,渲染Page1组件;当selectedIndex为1时,渲染Page2组件。同时,我们使用TabBar组件来切换不同的页面。通过onTabChanged回调函数,当选项卡切换时,更新selectedIndex的值,从而触发页面的重新渲染。

请注意,这只是一个简单示例,实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时,您可能还需要根据具体框架或库的要求进行相应的调整和修改。

四、给Index.ets添加Navbar组件

第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:TabBar和Navbar实现页面切换_第2张图片以下是在给定代码中添加Navbar的示例:

//装饰器,指页面入口。
@Entry
//装饰器,指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器,指状态变量,整数类型,赋值:0
  @State selectedIndex: number = 0;

  //构造函数,UI声明
  build() {
    //垂直布局组件
    Column() {
      //Navbar组件
      Navbar(
        //设置标题
        title: 'My App',
      );
      //TabBar组件
      TabBar(
        //绑定选中索引
        selectedIndex: this.selectedIndex,
        //回调函数,处理选项卡切换事件
        onTabChanged: (index) {
          this.selectedIndex = index;
        },
      ) {
        //Tab项1
        TabItem(
          //设置文本
          text: 'Page 1',
        );
        //Tab项2
        TabItem(
          //设置文本
          text: 'Page 2',
        );
      }
      //根据选中索引渲染对应的页面
      if (this.selectedIndex == 0) {
        //页面1
        Page1();
      } else if (this.selectedIndex == 1) {
        //页面2
        Page2();
      }
    }
  }
}

//自定义组件,页面1
struct Page1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件,页面2
struct Page2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

在给定的代码中,我们添加了一个Navbar组件,用于显示应用的标题。在Index组件的build方法中,首先添加了Navbar组件,并设置了标题为"My App"。然后,再添加了TabBar组件来切换不同的页面。通过onTabChanged回调函数,当选项卡切换时,更新selectedIndex的值,从而触发页面的重新渲染。根据selectedIndex的值,我们在Column布局组件中渲染不同的页面。如果selectedIndex为0,则渲染Page1组件;如果selectedIndex为1,则渲染Page2组件。

请注意,这只是一个简单示例,实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时,您可能还需要根据具体框架或库的要求进行相应的调整和修改。

五、使用Navbar独立实现页面切换

第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:TabBar和Navbar实现页面切换_第3张图片以下是一个示例代码,使用Navbar独立实现切换不同的页面:

//装饰器,指页面入口。
@Entry
//装饰器,指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器,指状态变量,整数类型,赋值:0
  @State selectedIndex: number = 0;

  //构造函数,UI声明
  build() {
    //垂直布局组件
    Column() {
      //Navbar组件
      Navbar(
        //设置标题
        title: 'My App',
        //设置左侧按钮
        leading: Icon(Icons.menu),
        //设置右侧按钮
        trailing: Icon(Icons.search),
        //设置左侧按钮点击事件
        onLeadingTap: () {
          //处理左侧按钮点击事件
        },
        //设置右侧按钮点击事件
        onTrailingTap: () {
          //处理右侧按钮点击事件
        },
      );
      //根据选中索引渲染对应的页面
      if (this.selectedIndex == 0) {
        //页面1
        Page1();
      } else if (this.selectedIndex == 1) {
        //页面2
        Page2();
      }
      //底部导航栏
      BottomNavigationBar(
        //绑定选中索引
        currentIndex: this.selectedIndex,
        //回调函数,处理导航项切换事件
        onTap: (index) {
          this.selectedIndex = index;
        },
        //导航项列表
        items: [
          BottomNavigationBarItem(
            //设置图标
            icon: Icon(Icons.home),
            //设置文本
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            //设置图标
            icon: Icon(Icons.settings),
            //设置文本
            label: 'Page 2',
          ),
        ],
      );
    }
  }
}

//自定义组件,页面1
struct Page1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件,页面2
struct Page2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

在给定的代码中,我们使用Navbar组件实现了顶部导航栏,并使用BottomNavigationBar组件实现了底部导航栏。通过设置currentIndex来绑定选中索引,并通过onTap回调函数处理导航项切换事件。根据selectedIndex的值,我们在Column布局组件中渲染不同的页面。如果selectedIndex为0,则渲染Page1组件;如果selectedIndex为1,则渲染Page2组件。

请注意,这只是一个简单示例,实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时,您可能还需要根据具体框架或库的要求进行相应的调整和修改。

六、Navbar和TabBar同时在Index.ets主页实现各自独立的页面切换

第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:TabBar和Navbar实现页面切换_第4张图片以下是一个示例代码,演示如何在Index主页上同时使用Navbar和TabBar实现各自独立页面切换:

//装饰器,指页面入口。
@Entry
//装饰器,指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器,指状态变量,整数类型,赋值:0
  @State navbarSelectedIndex: number = 0;
  @State tabBarSelectedIndex: number = 0;

  //构造函数,UI声明
  build() {
    //垂直布局组件
    Column() {
      //Navbar组件
      Navbar(
        //设置标题
        title: 'My App',
        //设置左侧按钮
        leading: Icon(Icons.menu),
        //设置右侧按钮
        trailing: Icon(Icons.search),
        //设置左侧按钮点击事件
        onLeadingTap: () {
          //处理左侧按钮点击事件
        },
        //设置右侧按钮点击事件
        onTrailingTap: () {
          //处理右侧按钮点击事件
        },
      );

      //根据navbarSelectedIndex渲染对应的Navbar页面
      if (this.navbarSelectedIndex == 0) {
        //Navbar页面1
        NavbarPage1();
      } else if (this.navbarSelectedIndex == 1) {
        //Navbar页面2
        NavbarPage2();
      }

      //TabBar组件
      TabBar(
        //绑定选中索引
        selectedIndex: this.tabBarSelectedIndex,
        //回调函数,处理选项卡切换事件
        onTabChanged: (index) {
          this.tabBarSelectedIndex = index;
        },
      ) {
        //Tab项1
        TabItem(
          //设置文本
          text: 'Tab 1',
        );
        //Tab项2
        TabItem(
          //设置文本
          text: 'Tab 2',
        );
      }

      //根据tabBarSelectedIndex渲染对应的TabBar页面
      if (this.tabBarSelectedIndex == 0) {
        //TabBar页面1
        TabBarPage1();
      } else if (this.tabBarSelectedIndex == 1) {
        //TabBar页面2
        TabBarPage2();
      }
    }
  }
}

//自定义组件,Navbar页面1
struct NavbarPage1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is Navbar Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件,Navbar页面2
struct NavbarPage2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is Navbar Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件,TabBar页面1
struct TabBarPage1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is TabBar Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件,TabBar页面2
struct TabBarPage2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件,参数
        Text('This is TabBar Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:TabBar和Navbar实现页面切换_第5张图片_在给定的代码中,我们在Index组件的build方法中同时使用了Navbar和TabBar组件。根据navbarSelectedIndex和tabBarSelectedIndex的值,分别渲染对应的Navbar页面和TabBar页面。

第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:TabBar和Navbar实现页面切换_第6张图片请注意,这只是一个简单示例,实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时,您可能还需要根据具体框架或库的要求进行相应的调整和修改。

你可能感兴趣的:(鸿蒙开发技术点案例示例短博文,harmonyos,华为)