掌握 Flutter 基本 TabBar 标签导航栏的奥秘：助你轻松构建用户界面！

2024-02-03 10:15:40

Flutter 中的 TabBar 标签导航栏是一种允许用户在应用程序中轻松切换不同内容或视图的控件。它在移动应用程序中非常常见，例如用来切换选项卡、页面或菜单。TabBar 标签导航栏通常位于屏幕的顶部或底部，并包含一系列选项卡，每个选项卡代表一个不同的内容或视图。当用户点击选项卡时，相应的视图就会显示出来。

1. 添加依赖

在开始使用 TabBar 标签导航栏之前，您需要在项目中添加相应的依赖。在您的 pubspec.yaml 文件中，添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

2. 导入依赖

接下来，您需要在您的 Dart 代码中导入 TabBar 标签导航栏的库。在您的 Dart 文件中，添加以下 import 语句：

import 'package:flutter/material.dart';

3. 创建 TabBar 标签导航栏

现在，您可以开始创建 TabBar 标签导航栏了。在您的代码中，添加以下代码：

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Demo'),
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home)),
              Tab(icon: Icon(Icons.settings)),
              Tab(icon: Icon(Icons.info)),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            Center(child: Text('Home')),
            Center(child: Text('Settings')),
            Center(child: Text('Info')),
          ],
        ),
      ),
    );
  }
}