Flutter – TabView 小部件

简介

Flutter 的 TabView 小部件用于创建具有选项卡式视图的应用程序。它提供了一种简单的方式来显示多个页面，并允许用户通过滑动选项卡来切换页面。TabView 可以与 TabBar 小部件一起使用，以在顶部或底部显示选项卡栏。

特性

• 可以在选项卡栏顶部或底部显示选项卡。
• 支持滑动切换选项卡。
• 支持自定义选项卡栏样式。
• 容易集成到现有的 Flutter 应用程序中。

用法示例

下面是一个简单的 TabView 示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabView 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  
  final List<Widget> tabs = [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ];
  
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabView 示例'),
          bottom: TabBar(
            tabs: tabs,
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text('页面 1')),
            Center(child: Text('页面 2')),
            Center(child: Text('页面 3')),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个 DefaultTabController，并设置了 tabs 列表作为选项卡。然后，我们使用 TabBar 在 AppBar 的底部显示选项卡。最后，我们使用 TabBarView 显示与每个选项卡对应的内容。

自定义选项卡栏样式

你可以根据需要自定义选项卡栏的样式。例如，你可以更改选中和非选中选项卡的颜色、指示器的颜色以及选项卡栏的高度等。

以下是一个自定义选项卡栏样式的示例：

TabBar(
  tabs: tabs,
  indicatorColor: Colors.red,
  labelColor: Colors.black,
  unselectedLabelColor: Colors.grey,
  indicatorSize: TabBarIndicatorSize.label,
  indicatorWeight: 2.0,
  labelStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
  unselectedLabelStyle: TextStyle(fontSize: 16.0),
  labelPadding: EdgeInsets.symmetric(horizontal: 20.0),
  indicatorPadding: EdgeInsets.symmetric(horizontal: 16.0),
  tabBarPadding: EdgeInsets.all(8.0),
)

在这个示例中，我们设置了选中选项卡的指示器颜色为红色，选中选项卡的文本颜色为黑色，非选中选项卡的文本颜色为灰色。我们还增加了选项卡指示器的大小和粗细，并调整了选项卡的间距。

结论

TabView 小部件是一个非常实用的 Flutter 小部件，用于创建具有选项卡式视图的应用程序。它简化了多页面应用程序的开发，提供了灵活的选项卡栏样式定制。无论是创建简单的选项卡还是复杂的用户界面，TabView 都能满足你的需求。开始使用 TabView，让你的应用程序更具交互性和可操作性。