Flutter标签栏

在本节中, 我们将学习选项卡栏在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<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);
  }
}

输出量

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