Flutter底部导航栏管理插件flutter_tabbar

Flutter底部导航栏管理插件flutter_tabbar_page的使用

功能

顺滑的动画和手势
可滚动的标签
完全自定义的TabBar单元格
高度可定制化

安装

在pubspec.yaml文件中添加依赖：

dependencies:
    flutter_tabbar_page: 0.0.3

导入包：

import 'package:flutter_tabbar_page/flutter_tabbar_page.dart';

使用方法

要开始使用TabBarPage，首先需要创建页面列表并创建TabPageController实例。

List<PageTabItemModel> lstPages = <PageTabItemModel>[];
final TabPageController _controller = TabPageController();

[@override](/user/override)
void initState() {
  super.initState();
  // 添加三个标签页
  lstPages.add(PageTabItemModel(title: "Tab1", page: const Center(child: Text("Item 1"))));
  lstPages.add(PageTabItemModel(title: "Tab2", page: const Center(child: Text("Item 2"))));
  lstPages.add(PageTabItemModel(title: "Tab3", page: const Center(child: Text("Item 3"))));
}

然后，在构建方法中添加TabBarPage组件：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Sample"), // 应用栏标题
    ),
    body: Column(
      children: <Widget>[
        Flexible(
          child: TabBarPage(
            controller: _controller, // 控制器
            pages: lstPages, // 页面列表
            isSwipable: true, // 是否支持滑动切换
            tabBackgroundColor: Colors.white, // 标签背景颜色
            tabitemBuilder: (context, index) { // 自定义标签项构造函数
              return InkWell(
                onTap: () {
                  _controller.onTabTap(index); // 点击标签时更新索引
                },
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / lstPages.length,
                  child: Stack(
                    alignment: Alignment.bottomCenter,
                    children: [
                      Center(
                        child: Text(
                          lstPages[index].title ?? "",
                          style: TextStyle(
                              fontWeight: _controller.currentIndex == index ? FontWeight.w700 : FontWeight.w400,
                              color: _controller.currentIndex == index ? Colors.indigoAccent : Colors.black26,
                              fontSize: 16),
                        ),
                      ),
                      Container(
                          height: 3,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: _controller.currentIndex == index ? Colors.indigoAccent : Colors.transparent)),
                    ],
                  ),
                ),
              );
            },
          ),
        )
      ],
    ),
  );
}

参数说明：

参数	类型	描述
`pages`	`List<PageTabItemModel>`	必需。包含标题和页面小部件的列表
`tabitemBuilder`	`IndexedWidgetBuilder`	必需。用于构建标签小部件
`controller`	`TabPageController`	必需。获取和更新当前标签索引
`isSwipable`	`bool`	默认值：false
`tabHeight`	`double`	默认值：50
`distributeTabEvenly`	`bool`	默认值：true，通过提供`tabAlignment`管理标签分配到整个宽度或左/右
`tabBackgroundColor`	`Color`	默认值：白色
`tabAlignment`	`Alignment`	默认值：Alignment.center

预览效果

示例代码

以下是一个完整的示例代码，展示了如何使用flutter_tabbar_page插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<PageTabItemModel> lstPages = <PageTabItemModel>[];
  final TabPageController _controller = TabPageController();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化标签页
    lstPages.add(PageTabItemModel(
        title: "Tab1", page: const Center(child: Text("Item 1"))));
    lstPages.add(PageTabItemModel(
        title: "Tab2", page: const Center(child: Text("Item 2"))));
    lstPages.add(PageTabItemModel(
        title: "Tab3", page: const Center(child: Text("Item 3"))));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Sample"), // 应用栏标题
      ),
      body: Column(
        children: <Widget>[
          Flexible(
            child: TabBarPage(
              controller: _controller, // 控制器
              pages: lstPages, // 页面列表
              isSwipable: true, // 是否支持滑动切换
              tabBackgroundColor: Colors.white, // 标签背景颜色
              tabitemBuilder: (context, index) { // 自定义标签项构造函数
                return InkWell(
                  onTap: () {
                    _controller.onTabTap(index); // 点击标签时更新索引
                  },
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width / lstPages.length,
                    child: Stack(
                      alignment: Alignment.bottomCenter,
                      children: [
                        Center(
                          child: Text(
                            lstPages[index].title ?? "",
                            style: TextStyle(
                                fontWeight: _controller.currentIndex == index ? FontWeight.w700 : FontWeight.w400,
                                color: _controller.currentIndex == index ? Colors.indigoAccent : Colors.black26,
                                fontSize: 16),
                          ),
                        ),
                        Container(
                            height: 3,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8),
                                color: _controller.currentIndex == index ? Colors.indigoAccent : Colors.transparent)),
                      ],
                    ),
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

更多关于Flutter底部导航栏管理插件flutter_tabbar_page的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼•9 小时前作者

更多关于Flutter底部导航栏管理插件flutter_tabbar_page的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，flutter_tabbar_page 是一个用于管理底部导航栏的插件，它提供了简洁而强大的方式来管理多个页面之间的导航。下面是一个使用 flutter_tabbar_page 的代码示例，展示如何设置和使用底部导航栏来管理多个页面。

首先，确保在你的 pubspec.yaml 文件中添加 flutter_tabbar_page 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_tabbar_page: ^latest_version  # 替换为最新的版本号

然后，运行 flutter pub get 来获取依赖。

接下来，是主应用代码的实现。在这个示例中，我们将创建三个页面，并使用 FlutterTabBarPage 来管理它们。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TabBar Page Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FlutterTabBarPage(
        items: [
          FlutterTabBarPageItem(
            icon: Icon(Icons.home),
            title: 'Home',
            page: HomePage(),
          ),
          FlutterTabBarPageItem(
            icon: Icon(Icons.search),
            title: 'Search',
            page: SearchPage(),
          ),
          FlutterTabBarPageItem(
            icon: Icon(Icons.person),
            title: 'Profile',
            page: ProfilePage(),
          ),
        ],
        controller: FlutterTabBarPageController(), // 创建一个控制器来管理页面
        initialIndex: 0, // 初始页面索引
        indicatorColor: Colors.blue, // 选中指示器颜色
        indicatorSize: TabBarIndicatorSize.label, // 指示器大小
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Welcome to the Home Page!'),
      ),
    );
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Page'),
      ),
      body: Center(
        child: Text('Welcome to the Search Page!'),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Page'),
      ),
      body: Center(
        child: Text('Welcome to the Profile Page!'),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

定义 MyApp 小部件：这是我们的主应用小部件，它使用 MaterialApp 包装了我们的应用。
使用 FlutterTabBarPage：我们在 home 属性中使用了 FlutterTabBarPage 小部件，并传递了一个 FlutterTabBarPageItem 列表来定义底部导航栏的各个项目。
定义页面：我们定义了三个页面 (HomePage, SearchPage, ProfilePage)，每个页面都是一个简单的 Scaffold，包含一个 AppBar 和一个居中的文本。

FlutterTabBarPage 自动处理了底部导航栏的创建和页面之间的切换。你可以根据需要自定义每个 FlutterTabBarPageItem 的图标、标题和页面内容。

这个示例展示了如何使用 flutter_tabbar_page 插件来简化底部导航栏的管理。根据你的具体需求，你可以进一步自定义和扩展这个基础代码。