Flutter- 标签

标签正是您认为的那样。它是用户界面的一部分，在用户点击时通过不同的路线(即页面)导航。在应用程序中使用选项卡是标准做法。 Flutter提供了一种使用材料库创建选项卡布局的简单方法。在本文中，探索我们将详细探索相同的内容。

为了更好地理解选项卡的概念及其在Flutter应用程序中的功能，让我们按照以下步骤构建一个包含 5 个选项卡的简单应用程序：

• 设计一个 TabController。
• 向应用程序添加标签。
• 在每个选项卡中添加内容。

让我们详细讨论它们。

设计一个 TabController：

顾名思义， TabController通过相互同步选项卡和内容来控制每个选项卡的功能。 DefaultTabController小部件是在flutter创建选项卡的最简单方法之一。如下图所示：

Dart

DefaultTabController(
  // total 5 tabs
  length: 5,
  child:
);

添加标签：

Flutter的选项卡可以使用 TabBar 小部件创建，如下所示：

Dart

DefaultTabController(
  length: 5,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.music_note)),
          Tab(icon: Icon(Icons.music_video)),
          Tab(icon: Icon(Icons.camera_alt)),
          Tab(icon: Icon(Icons.grade)),
          Tab(icon: Icon(Icons.email)),
        ],
      ),
    ),
  ),
);

向选项卡添加内容：

TabBarView 小部件可用于指定每个选项卡的内容。为简单起见，我们将选项卡中的图标显示为选项卡的内容，如下所示：

Dart

TabBarView(
  children: [
          Tab(icon: Icon(Icons.music_note)),
          Tab(icon: Icon(Icons.music_video)),
          Tab(icon: Icon(Icons.camera_alt)),
          Tab(icon: Icon(Icons.grade)),
          Tab(icon: Icon(Icons.email)),
  ],
);

完整的源代码：

Dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(TabBarDemo());
}
 
class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 5,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.music_note)),
                Tab(icon: Icon(Icons.music_video)),
                Tab(icon: Icon(Icons.camera_alt)),
                Tab(icon: Icon(Icons.grade)),
                Tab(icon: Icon(Icons.email)),
              ],
            ),
            title: Text('GeeksForGeeks'),
            backgroundColor: Colors.green,
          ),
          body: TabBarView(
            children: [
              Icon(Icons.music_note),
              Icon(Icons.music_video),
              Icon(Icons.camera_alt),
              Icon(Icons.grade),
              Icon(Icons.email),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！