标签正是您认为的那样。它是用户界面的一部分,在用户点击时通过不同的路线(即页面)导航。在应用程序中使用选项卡是标准做法。 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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!