Flutter 中的 TabBar 小部件：全面指南

在Flutter中，TabBar是一个小部件，用于在顶部显示一行标签，通常与TabBarView一起使用来创建带有页签的界面。以下是一个简单的例子，展示如何使用TabBar和TabBarView：

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('TabBar Example'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home), text: 'Home'),
                Tab(icon: Icon(Icons.mail), text: 'Mail'),
                Tab(icon: Icon(Icons.phone), text: 'Phone'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Home Content')),
              Center(child: Text('Mail Content')),
              Center(child: Text('Phone Content')),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个带有三个页签的应用，每个页签分别显示图标和文本。TabBar位于应用栏中，而TabBarView则位于屏幕的其余部分，显示当前选定页签对应的内容。DefaultTabController是用来管理选项卡状态的控制器，其length属性设置为3，表示有三个选项卡。