Flutter Tabbar

17 Mar 2025 | 4 分钟阅读

在本节中，我们将学习 Flutter 中选项卡栏的工作方式。选项卡主要用于移动导航。选项卡的样式对于不同的操作系统是不同的。例如，它在 Android 设备上位于屏幕顶部，而在 iOS 设备上位于底部。

使用选项卡是 Android 和 iOS 应用程序中遵循 Material Design 指导方针的常见模式。Flutter 提供了一种创建选项卡布局的便捷方法。要将选项卡添加到应用程序中，我们需要创建 TabBar 和 TabBarView 并将它们与 TabController 关联。控制器将同步两者，以便我们可以获得所需行为。

让我们逐步看看如何在 Flutter 应用程序中创建选项卡栏。

步骤 1： 首先，您需要在 IDE 中创建一个 Flutter 项目。在这里，我将使用 Android Studio。

步骤 2： 在 Android Studio 中打开应用程序并导航到 lib 文件夹。在 lib 文件夹中，创建两个 dart 文件并将其命名为 FirstScreen 和 SecondScreen。

在 FirstScreen 中编写以下代码

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('It is a contact tab, which is responsible for displaying the contacts stored in your mobile',
            style: TextStyle(fontSize: 32.0),
          )
      ),
    );
  }
}

在 SecondScreen 中编写以下代码

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('It is a second layout tab, which is responsible for taking pictures from your mobile.',
        style: TextStyle(fontSize: 35.0),
        ),
      ),
    );
  }
}

步骤 3： 接下来，我们需要创建一个 DefaultTabController。 DefaultTabController 创建一个 TabController 并使其可用于所有小部件。

DefaultTabController(
  // The number of tabs to display.
  length: 2,
  child: // Complete this code in the next step.
);

在上面的代码中，length 属性说明了应用程序中使用的选项卡数量。

步骤 4： 创建选项卡。我们可以通过使用 TabBar 小部件创建选项卡，如下面的代码所示。

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);

步骤 5： 为每个选项卡创建内容，以便当选择一个选项卡时，它会显示内容。为此，我们必须使用 TabBarView 小部件

TabBarView(
  children: [
  ],
);

步骤 6： 最后，打开 main.dart 文件并插入以下代码

import 'package:flutter/material.dart';
import './FirstScreen.dart';
import './SecondScreen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tabs Demo'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.contacts), text: "Tab 1"),
                Tab(icon: Icon(Icons.camera_alt), text: "Tab 2")
              ],
            ),
          ),
          body: TabBarView(
            children: [
              FirstScreen(),
              SecondScreen(),
            ],
          ),
        ),
      ),
    );
  }
}

输出

现在，在您的 Android Studio 中运行应用程序。它将显示以下屏幕，您可以在其中看到两个选项卡图标。因此，当您单击任何选项卡图标时，它将显示关联的屏幕。

显示 SnackBar

SnackBar 在移动设备的屏幕底部以及较大设备的左下角给出一个 简短的消息，并从用户处获得确认。小吃栏会在一定时间后自动消失。

在这里，我们将学习如何在 Flutter 中实现一个小吃栏。在 Flutter 中，小吃栏仅适用于 scaffold 小部件上下文。

让我们举个例子，我们展示了记录列表，并且包含与每个列表对应的删除图标。当我们删除任何记录时，它会在您的屏幕底部显示一条消息。此消息从用户处获得确认。如果它没有收到任何确认，则消息会自动消失。以下示例有助于更清楚地理解它。

在 Android Studio 中创建一个 Flutter 项目。打开 main.dart 文件并替换以下代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var lists = List<String>.generate(11, (index) => "List : $index");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SnackBar Demo'),
      ),
      body: ListView.builder(
        itemCount: lists.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(lists[index]),
            trailing: Container(
              width: 60,
              child: FlatButton(
                child: Icon(
                  Icons.delete,
                  color: Colors.grey,
                ),
                onPressed: () {
                  showSnackBar(context, index);
                },
              ),
            ),
          );
        },
      ),
    );
  }

  void showSnackBar(BuildContext context, int index) {
    var deletedRecord = lists[index];
    setState(() {
      lists.removeAt(index);
    });
    SnackBar snackBar = SnackBar(
      content: Text('Deleted $deletedRecord'),
      action: SnackBarAction(
        label: "UNDO",
        onPressed: () {
          setState(() {
            lists.insert(index, deletedRecord);
          });
        },
      ),
    );
    Scaffold.of(context).showSnackBar(snackBar);
  }
}

输出

现在，在 Android Studio 中运行该应用程序。您可以在模拟器中看到以下屏幕。当您删除任何列表时，它会在屏幕底部显示一条消息。如果您点击撤消，它不会删除该列表。

下一个主题#

Flutter Tabbar

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter Tabbar

相关帖子

Flutter Toast

Flutter 复选框

Flutter 滑块

Flutter Container

Flutter Scaffold

底部导航栏

Flutter 按钮

Flutter 行和列

Flutter 单选按钮

Flutter 进度条

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器