Flutter 底部导航标签栏（10）

• 第一步也是最基本的步骤是在 Flutter 中创建一个新应用程序。如果你是初学者，可以查看我的博客Create a first app in Flutter。我创建了一个名为“flutter_chat_app”的应用程序。
• 创建一个新文件夹“Pages”，然后在其中创建一个名为 home.dart 的页面。在此页面上，我们将生成底部导航标签栏。因此，我们将在 main.dart 文件中放置一个按钮，该按钮将导航到 home.dart 文件。下面是从 main.dart 文件导航到 home.dart 文件的代码。

  Navigator.of(context).pushReplacement(    
    MaterialPageRoute(    
      builder: (context) => HomePage(),    
    ),    
  );   

• 在 home.dart 文件中，创建一个 TabContent 类，其中包含选项卡的标题和实际内容。看看下面的类。

  class TabContent {    
    String title;    
    Widget content;    
    TabContent({this.title, this.content});    
  }   

   

• 初始化一个整数变量以跟踪活动选项卡索引。

  int _currentIndex = 0;    

• 初始化选项卡的内容。对于此示例，我们将采用 2 个选项卡。

  List<TabContent> tabContent = [
TabContent(
title: 'Tab1',
content: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Tab1'),
],
),
),
),
TabContent(
title: 'Tab2',
content: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Tab2'),
],
),
),
)
];

• 现在，在 MaterialApp 组件中配置底部导航选项卡栏。

  return MaterialApp(    
    home: DefaultTabController(    
      length: 2,    
      child: Scaffold(    
        appBar: AppBar(    
          title: Text(tabContent[_currentIndex].title),    
        ),    
        body: tabContent[_currentIndex].content,    
        bottomNavigationBar: BottomNavigationBar(    
          onTap: (index) {    
            setState(    
              () {    
                _currentIndex = index;    
              },    
            );    
          }, // new    
          currentIndex: _currentIndex, // new    
          items: [    
            new BottomNavigationBarItem(    
              icon: Icon(Icons.mail),    
              title: Text('Tab1'),    
            ),    
            new BottomNavigationBarItem(    
              icon: Icon(Icons.verified_user),    
              title: Text('Tab2'),    
            )    
          ],    
        ),    
      ),    
    ),    
  );

• ！您已完成 Flutter 中底部导航选项卡栏的示例构建块。运行程序。调整代码并深入理解它。

结论

在本文中，我们学习了如何在 Flutter 中实现底部导航标签栏。您甚至可以根据您的要求进行自定义并使其丰富。