Flutter TabBar、TabBarView、 TabController使用示例

发表于 2019年12月05日
flutter

Flutter提供了一种非常方便的方式来创建标签布局。为了使标签起作用，我们需要使选定的标签和内容部分保持同步。这是TabController的工作。我们的示例应用程序有一个屏幕，其中包含一个带有两个屏幕的标签栏。

Flutter TabBar、TabBarView、 TabController使用示例

要将Tabs添加到应用程序中，我所需要做的就是创建TabBar和TabBarView并将TabController附加到它们。TabController会将TabBar与TabBarView同步，以便我们可以实现所需的行为。

目录表

步骤一：创建tab页

FirstScreen.dart
SecondScreen.dart

在FirstScreen.dart中编写以下代码：

// FirstScreen.dart

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text('Tab 1 Layout'),
),
);
}
}

在SecondScreen.dart中编写以下代码：

// SecondScreen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text('Tab 2 Layout'),
),
);
}
}

现在，剩下的就是创建一个DefaultTabController。

步骤二：创建一个DefaultTabController

在main.dart文件中编写以下代码：

// main.dart

import 'package:flutter/material.dart';

import './pages/FirstScreen.dart';
import './pages/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(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit))
],
),
title: Text('Flutter Tabs Example'),
),
body: TabBarView(
children: [
FirstScreen(),
SecondScreen(),
],
),
),
),
);
}
}

在上面的代码中，我们导入了本文前面创建的两个屏幕。