Flutter自定义页面导航与包含标签栏视图插件 contained_tab_bar_view_with_custom_page_navigator 的使用

ContainedTabBarView 是一个封装了 TabController, TabBar 和 TabBarView 的 Widget，它简化了这些组件的使用，并提供了丰富的自定义选项。本文将介绍如何使用这个插件来创建自定义页面导航和标签栏视图。

基本用法

示例 1：基本示例

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Example1(),
    );
  }
}

class Example1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example 1'),
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(8.0),
          color: Colors.blue,
          width: 200,
          height: 300,
          child: ContainedTabBarView(
            tabs: [
              Text('First'),
              Text('Second'),
            ],
            views: [
              Container(color: Colors.red),
              Container(color: Colors.green)
            ],
            onChange: (index) => print(index),
          ),
        ),
      ),
    );
  }
}

在上面的例子中，我们创建了一个 ContainedTabBarView，它包含两个标签页（“First” 和 “Second”），每个标签页对应一个不同的颜色背景。

中级用法

自定义 TabBar 属性

可以通过 tabBarProperties 来设置 TabBar 的各种属性，如宽度、高度、背景等。

示例 5：自定义 TabBar 属性

class Example5 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example 5'),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 360,
          child: ContainedTabBarView(
            tabs: [
              Text('First'),
              Text('Second'),
            ],
            tabBarProperties: TabBarProperties(
              width: 200,
              height: 32,
              background: Container(
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.4),
                      spreadRadius: 0.5,
                      blurRadius: 2,
                      offset: Offset(1, -1),
                    ),
                  ],
                ),
              ),
              position: TabBarPosition.bottom,
              alignment: TabBarAlignment.end,
              indicatorColor: Colors.transparent,
              labelColor: Colors.white,
              unselectedLabelColor: Colors.grey[400],
            ),
            views: [
              Container(color: Colors.red),
              Container(color: Colors.green)
            ],
            onChange: (index) => print(index),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们设置了 TabBar 的宽度、高度、背景、位置、对齐方式、指示器颜色、标签颜色等属性。

高级用法

从外部控件更改标签页

可以使用 GlobalKey 来控制 ContainedTabBarView 的状态，并通过 animateTo()、next() 和 previous() 方法来切换标签页。

示例 7：从外部控件更改标签页

class Example7 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    GlobalKey<ContainedTabBarViewState> _key = GlobalKey();
    ContainedTabBarView containedTabBarView = ContainedTabBarView(
      key: _key,
      tabs: [
        Text('First'),
        Text('Second'),
      ],
      views: [
        Container(color: Colors.red),
        Container(color: Colors.green),
      ],
      onChange: (index) => print(index),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Example 7'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () => _key.currentState?.previous(),
            child: Icon(Icons.arrow_back_ios),
          ),
          Center(
            child: Container(
              padding: const EdgeInsets.all(8.0),
              color: Colors.blue,
              width: 200,
              height: 300,
              child: containedTabBarView,
            ),
          ),
          ElevatedButton(
            child: Icon(Icons.arrow_forward_ios),
            onPressed: () => _key.currentState?.next(),
          ),
        ],
      ),
    );
  }
}

在这个例子中，我们添加了两个按钮，分别用于切换到上一个和下一个标签页。

完整示例 Demo

以下是一个完整的示例，展示了如何使用 ContainedTabBarView 创建一个带有自定义导航和标签栏的应用程序：

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Navigation with Tabs'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => Example1()));
              },
              child: Text('Example 1'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => Example5()));
              },
              child: Text('Example 5'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => Example7()));
              },
              child: Text('Example 7'),
            ),
          ],
        ),
      ),
    );
  }
}

// Example1, Example5, and Example7 are defined as above.

在这个完整的示例中，我们创建了一个主屏幕，其中包含三个按钮，每个按钮都可以导航到不同的示例页面。每个示例页面都使用了 ContainedTabBarView 来实现不同的功能和自定义效果。

通过这种方式，您可以轻松地在 Flutter 应用中实现自定义页面导航和标签栏视图。希望这些示例能够帮助您更好地理解和使用 contained_tab_bar_view 插件。