Flutter学习指南：TabBarView组件与项目实战综合详解

iOS

2023-03-11 22:23:35

Flutter TabBarView：创建选项卡式应用程序布局

引言

Flutter 中的选项卡式布局提供了用户在不同内容区域之间切换的能力。TabBarView 小部件与 TabBar 小部件协同工作，为用户界面创建直观的导航体验。

TabBarView 组件

TabBarView 组件负责管理不同选项卡内容的显示。它包含一个选项卡小部件列表，每个小部件代表一个选项卡。当用户点击 TabBar 中的相应标签时，关联的选项卡小部件就会显示在 TabBarView 中。

TabBar 组件

TabBar 组件包含一系列标签，它们与 TabBarView 中的选项卡小部件一一对应。当用户点击标签时，TabBar 会通知 TabBarView 显示相应的选项卡小部件。TabBar 可以垂直或水平放置，取决于应用程序的设计要求。

使用方法

要使用 TabBarView 组件，您需要在其中包含选项卡小部件列表。然后，您需要使用与选项卡小部件标签相对应的 Tab 组件创建一个 TabBar。最后，将 TabBar 作为 AppBar 的底部小部件或 Scaffold 的 body 属性传递给 TabBarView。

Scaffold(
  appBar: AppBar(
    title: Text('选项卡式布局'),
    bottom: TabBar(
      tabs: [
        Tab(text: '选项卡 1'),
        Tab(text: '选项卡 2'),
        Tab(text: '选项卡 3'),
      ],
    ),
  ),
  body: TabBarView(
    children: [
      // 选项卡 1 小部件
      Text('这是选项卡 1'),

      // 选项卡 2 小部件
      Text('这是选项卡 2'),

      // 选项卡 3 小部件
      Text('这是选项卡 3'),
    ],
  ),
);

高级选项

TabBarView 组件提供了多种选项来自定义选项卡的行为和外观。这些选项包括：

控制器（controller）： 用于手动控制当前显示的选项卡。
物理特性（physics）： 定义选项卡切换时的动画效果。
指示器（indicator）： 自定义选项卡指示器的样式。
指示器颜色（indicatorColor）： 设置选项卡指示器的颜色。
指示器尺寸（indicatorSize）： 设置选项卡指示器的尺寸。

项目实战：使用 TabBarView 构建天气应用程序

为了展示 TabBarView 组件的实际应用，让我们构建一个简单的天气应用程序。此应用程序将具有三个选项卡，分别显示不同天气条件的数据。

首先，创建一个新的 Flutter 项目。然后，在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

接下来，在 main.dart 文件中编写应用程序代码：

import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '天气应用程序',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '天气应用程序'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(CupertinoIcons.cloud_rain)),
            Tab(icon: Icon(CupertinoIcons.cloud_sun)),
            Tab(icon: Icon(CupertinoIcons.cloud_hail)),
          ],
        ),
      ),
      body: TabBarView(
        children: [
          // 天气选项卡 1
          Text('这是天气选项卡 1'),

          // 天气选项卡 2
          Text('这是天气选项卡 2'),

          // 天气选项卡 3
          Text('这是天气选项卡 3'),
        ],
      ),
    );
  }
}