关注我们

Flutter - Tabbar

在本节中，无涯教程将学习Tabbar在Flutter中的工作方式。这些选项卡主要用于移动导航。对于不同的操作系统，选项卡的样式是不同的。例如，将其放置在android设备的屏幕顶部，而将其放置在iOS设备的底部。

让无涯教程一步一步地在Flutter应用程序中创建一个标签栏。

链接：https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-tabbar.html

来源：LearnFk无涯教程网

步骤1:首先，您需要在IDE中创建一个Flutter项目。在这里，无涯教程将使用Android Studio。

步骤2:在Android Studio中打开该应用程序，然后导航到lib文件夹。在lib文件夹中，创建两个dart文件，并将其命名为FirstScreen和SecondScreen。

在FirstScreen中写下以下代码:

复制代码

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('It is a contact tab, which is responsible for displaying the contacts stored in your mobile',
            style: TextStyle(fontSize: 32.0),
          )
      ),
    );
  }
}

在SecondScreen中编写以下代码：

复制代码

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('It is a second layout tab, which is responsible for taking pictures from your mobile.',
        style: TextStyle(fontSize: 35.0),
        ),
      ),
    );
  }
}

步骤3:接下来，无涯教程需要创建一个DefaultTabController。 DefaultTabController创建一个TabController并将其提供给所有小部件。

复制代码

DefaultTabController(
 //The number of tabs to display.
  length: 2,
  child://Complete this code in the next step.
);

在上面的代码中，length属性告诉应用程序中使用的选项卡数量。

步骤4:创建选项卡。无涯教程可以使用TabBar小部件创建标签，如下所示。

复制代码

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);

步骤5:为每个选项卡创建内容，以便在选择选项卡时显示其内容。为此，无涯教程必须将TabBarView小部件用作：

复制代码

TabBarView(
  children: [
  ],
);

步骤6:最后，打开main.dart文件并插入以下代码

复制代码

import 'package:flutter/material.dart';
import './FirstScreen.dart';
import './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(
            title: Text('Flutter Tabs Demo'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.contacts), text: "Tab 1"),
                Tab(icon: Icon(Icons.camera_alt), text: "Tab 2")
              ],
            ),
          ),
          body: TabBarView(
            children: [
              FirstScreen(),
              SecondScreen(),
            ],
          ),
        ),
      ),
    );
  }
}

现在，在您的Android Studio中运行该应用程序。它将显示以下屏幕，您可以在其中看到两个标签图标。因此，当您单击任何选项卡图标时，它将显示相关的屏幕。

显示SnackBar

SnackBar在移动设备的屏幕底部显示一条简短消息，会在一段时间后自动消失。

让无涯教程以显示记录列表的示例为例，其中包含与每个列表相对应的删除图标。当无涯教程删除任何记录时，它会在屏幕底部显示一条消息。该消息得到用户的确认。如果未收到任何确认，该消息将自动消失。以下示例有助于更清楚地理解它。

无涯教程网

在Android Studio中创建Flutter项目。打开main.dart文件并替换以下代码。

复制代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var lists = List<String>.generate(11, (index) => "List : $index");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SnackBar Demo'),
      ),
      body: ListView.builder(
        itemCount: lists.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(lists[index]),
            trailing: Container(
              width: 60,
              child: FlatButton(
                child: Icon(
                  Icons.delete,
                  color: Colors.grey,
                ),
                onPressed: () {
                  showSnackBar(context, index);
                },
              ),
            ),
          );
        },
      ),
    );
  }

  void showSnackBar(BuildContext context, int index) {
    var deletedRecord = lists[index];
    setState(() {
      lists.removeAt(index);
    });
    SnackBar snackBar = SnackBar(
      content: Text('Deleted $deletedRecord'),
      action: SnackBarAction(
        label: "UNDO",
        onPressed: () {
          setState(() {
            lists.insert(index, deletedRecord);
          });
        },
      ),
    );
    Scaffold.of(context).showSnackBar(snackBar);
  }
}