Flutter框架 TabBarView

封面图 • 2025-11-02 • Flutter

在 Flutter 框架中，`TabBarView` 是一个非常常用的组件，通常与 `TabBar` 一起使用，用于实现标签页切换的功能。它常用于构建类似底部导航栏、顶部标签页等界面。

---

## ✅ 一、基本结构

`TabBarView` 一般和 `TabBar` 配合使用，它们共同构成一个“标签页”控件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3, // 标签数量
        child: Scaffold(
          appBar: AppBar(
            title: Text('TabBarView 示例'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home)),
                Tab(icon: Icon(Icons.business)),
                Tab(icon: Icon(Icons.school)),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('首页')),
              Center(child: Text('工作')),
              Center(child: Text('学校')),
            ],
          ),
        ),
      ),
    );
  }
}
```

---

## ✅ 二、关键点说明

### 1. `DefaultTabController`
- `DefaultTabController` 是一个控制器，用来管理 `TabBar` 和 `TabBarView` 的状态。
- 它需要指定 `length` 属性，表示标签的数量。

### 2. `TabBar`
- 用于显示标签按钮（可以是图标、文字等）。
- 可以设置 `isScrollable` 实现可滚动的标签栏。

### 3. `TabBarView`
- 显示与 `TabBar` 对应的页面内容。
- 每个 `TabBarView` 的子项对应一个标签页的内容。

---

## ✅ 三、自定义 TabBarView

你可以对 `TabBarView` 进行更复杂的定制，比如：

### - 使用 `PageView` 替代 `TabBarView`

如果你想要更灵活的页面切换方式（如左右滑动），可以用 `PageView` + `TabBar`：

```dart
class MyTabPage extends StatefulWidget {
  @override
  _MyTabPageState createState() => _MyTabPageState();
}

class _MyTabPageState extends State<MyTabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

@override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

@override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义 TabBarView'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: '首页'),
            Tab(text: '工作'),
            Tab(text: '学校'),
          ],
        ),
      ),
      body: PageView(
        controller: _tabController,
        children: [
          Center(child: Text('首页内容')),
          Center(child: Text('工作内容')),
          Center(child: Text('学校内容')),
        ],
      ),
    );
  }
}
```

---

## ✅ 四、常见问题

### Q1: 如何让 TabBarView 的页面支持滑动？

- 默认情况下，`TabBarView` 支持左右滑动切换页面。
- 如果你使用了 `PageView`，也需要确保其支持滑动。

### Q2: 如何设置默认选中的 tab？

- 使用 `DefaultTabController` 时，可以通过 `initialIndex` 设置初始选中的 tab 索引。

```dart
DefaultTabController(
  initialIndex: 1, // 默认选中第二个 tab
  length: 3,
  child: ...
)
```

### Q3: 如何在 TabBarView 中嵌套其他组件？

- 可以直接在 `children` 中添加任何 Widget，比如 `ListView`、`GridView`、`Column` 等。

---

## ✅ 五、总结

| 组件 | 功能 |
|------|------|
| `DefaultTabController` | 控制多个 `TabBar` 和 `TabBarView` 的状态 |
| `TabBar` | 显示标签按钮 |
| `TabBarView` | 显示每个标签对应的内容 |

---

如果你有具体需求（如动态加载 tab 内容、动画效果、自定义样式等），欢迎继续提问！