Flutter标签栏 Flutter标签栏|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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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中, 小吃店仅适用于脚手架小部件上下文。
【Flutter标签栏】让我们以显示记录列表的示例为例, 其中包含与每个列表相对应的删除图标。当我们删除任何记录时, 它会在屏幕底部显示一条消息。该消息得到用户的确认。如果未收到任何确认, 该消息将自动消失。以下示例有助于更清楚地理解它。
在Android Studio中创建Flutter项目。打开main.dart文件并替换以下代码。

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {@overrideWidget 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"); @overrideWidget 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中运行该应用程序。你可以在仿真器中看到以下屏幕。删除任何列表时, 它会在屏幕底部显示一条消息。如果你点击撤消, 它不会删除列表。