Flutter 底部导航标签栏(10)

作者 : 慕源网 本文共1577个字,预计阅读时间需要4分钟 发布时间: 2021-11-14 共277人阅读

介绍

Flutter 加载了预定义的组件,底部导航栏就是其中之一。那么,让我们看看如何在 Flutter 中实现底部导航标签栏。

注意
本文是我在 Flutter 中使用 Firebase 进行聊天应用系列的一部分。我们的聊天应用系列是使用 Google Firebase 在 Flutter 中制作聊天应用的最佳示例之一。如果您对聊天应用程序感兴趣,可以查看整个系列。

输出

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 中实现底部导航标签栏。您甚至可以根据您的要求进行自定义并使其丰富。


慕源网 » Flutter 底部导航标签栏(10)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录