📌  相关文章
📜  Flutter标签栏

📅  最后修改于: 2021-01-02 05:06:57             🧑  作者: Mango

颤动标签栏

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

在遵循Material Design指南的Android和iOS应用中，使用标签是一种常见的模式。 Flutter提供了一种创建选项卡布局的便捷方法。要将选项卡添加到应用程序，我们需要创建一个TabBar和TabBarView并将其附加到TabController。控制器将同步两者，以便我们可以拥有所需的行为。

让我们一步一步地在Flutter应用程序中创建一个标签栏。

步骤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在移动设备的屏幕底部显示一条简短消息，在大型设备的屏幕左下方显示一条简短消息，并获得用户的确认。小吃店会在一段时间后自动消失。

在这里，我们将学习如何在Flutter中实现小吃店。在Flutter中，小吃店仅适用于脚手架小部件上下文。

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

在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 {
  var lists = List.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);
  }
}

输出量

现在，在Android Studio中运行该应用。您可以在仿真器中看到以下屏幕。删除任何列表时，它会在屏幕底部显示一条消息。如果您点击撤消，它不会删除列表。