📜  Flutter- 标签

📅  最后修改于: 2021-09-02 05:46:56             🧑  作者: Mango

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

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

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

让我们详细讨论它们。

设计一个 TabController:

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

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


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)),
        ],
      ),
    ),
  ),
);


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),
            ],
          ),
        ),
      ),
    );
  }
}


添加标签:

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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!