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

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

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