Flutter标签页管理插件tabby的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter标签页管理插件tabby的使用

在Flutter中，tabby 是一个强大的标签页管理插件。它支持多种布局方式，包括底部导航栏（bottomNavigationBar）、侧边栏（navigationRail）、顶部标签页（topTabs）、抽屉式导航（drawer）和侧边菜单（sidebar）。以下是如何使用 tabby 插件的详细步骤。

特性

  • 底部导航栏 (bottomNavigationBar)
  • 侧边栏 (navigationRail)
  • 顶部标签页 (topTabs)
  • 抽屉式导航 (drawer)
  • 侧边菜单 (sidebar)

使用方法

示例代码

首先，确保你已经在项目的 pubspec.yaml 文件中添加了 tabby 依赖项：

dependencies:
  flutter:
    sdk: flutter
  tabby: ^x.x.x  # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

接下来是一个完整的示例代码，展示了如何使用 tabby 插件来创建一个带有多个标签页的应用程序。

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

void main() => runApp(const TabbyExampleApp());

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        theme: ThemeData.light(useMaterial3: true)
            .copyWith(splashFactory: InkSparkle.splashFactory),
        debugShowCheckedModeBanner: false,
        home: const TabbyTest(),
      );
}

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

  @override
  State<TabbyTest> createState() => _TabbyTestState();
}

class _TabbyTestState extends State<TabbyTest> {
  late TabbyType? type;
  bool rightHanded = false;

  @override
  void initState() {
    type = null;
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Tabby(
          rightHanded: rightHanded,
          type: type,
          appBar: AppBar(
            title: const Text("Tabby Example"),
            actions: [
              if (type?.isHanded ?? false)
                IconButton(
                  icon: Icon(rightHanded
                      ? Icons.toggle_on_rounded
                      : Icons.toggle_off_rounded),
                  onPressed: () => setState(() => rightHanded = !rightHanded),
                ),
              PopupMenuButton<TabbyType?>(
                child: const Padding(
                  padding: EdgeInsets.only(right: 7),
                  child: Icon(Icons.category_rounded),
                ),
                onSelected: (value) => setState(() => type = value),
                itemBuilder: (context) => [
                  const PopupMenuItem(child: Text("auto"), value: null),
                  ...TabbyType.values.map((e) => PopupMenuItem<TabbyType?>(
                        value: e,
                        child: Text(e.toString().split(".").last),
                      ))
                ],
              ),
            ],
          ),
          tabs: [
            TabbyTab(
              icon: Icons.home_outlined,
              selectedIcon: Icons.home_rounded,
              label: "Home",
              appBarBuilder: (bar) => bar!.copyWith(
                title: const Text("Home"),
              ),
              builder: (context) => const Center(child: Text("Home")),
            ),
            TabbyTab(
              icon: Icons.search_outlined,
              selectedIcon: Icons.search_rounded,
              label: "Search",
              appBarBuilder: (bar) => bar!.copyWith(
                title: const Text("Search"),
                actions: [
                  IconButton(
                    icon: const Icon(Icons.search),
                    onPressed: () {},
                  ),
                  ...bar.actions!,
                ],
              ),
              builder: (context) => const Center(child: Text("Search")),
            ),
            TabbyTab(
              icon: Icons.settings_outlined,
              selectedIcon: Icons.settings_rounded,
              label: "Settings",
              appBarBuilder: (bar) => bar!.copyWith(
                title: const Text("Settings"),
              ),
              builder: (context) => const Center(child: Text("Settings")),
            ),
          ],
        ),
      );
}

代码解析

  1. 导入库

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

  2. 定义主应用

    void main() => runApp(const TabbyExampleApp());

  3. 定义主应用类

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        theme: ThemeData.light(useMaterial3: true)
            .copyWith(splashFactory: InkSparkle.splashFactory),
        debugShowCheckedModeBanner: false,
        home: const TabbyTest(),
      );
}

  4. 定义状态类

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

  @override
  State<TabbyTest> createState() => _TabbyTestState();
}

  5. 定义状态

    class _TabbyTestState extends State<TabbyTest> {
  late TabbyType? type;
  bool rightHanded = false;

  @override
  void initState() {
    type = null;
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Tabby(
          rightHanded: rightHanded,
          type: type,
          appBar: AppBar(
            title: const Text("Tabby Example"),
            actions: [
              if (type?.isHanded ?? false)
                IconButton(
                  icon: Icon(rightHanded
                      ? Icons.toggle_on_rounded
                      : Icons.toggle_off_rounded),
                  onPressed: () => setState(() => rightHanded = !rightHanded),
                ),
              PopupMenuButton<TabbyType?>(
                child: const Padding(
                  padding: EdgeInsets.only(right: 7),
                  child: Icon(Icons.category_rounded),
                ),
                onSelected: (value) => setState(() => type = value),
                itemBuilder: (context) => [
                  const PopupMenuItem(child: Text("auto"), value: null),
                  ...TabbyType.values.map((e) => PopupMenuItem<TabbyType?>(
                        value: e,
                        child: Text(e.toString().split(".").last),
                      ))
                ],
              ),
            ],
          ),
          tabs: [
            TabbyTab(
              icon: Icons.home_outlined,
              selectedIcon: Icons.home_rounded,
              label: "Home",
              appBarBuilder: (bar) => bar!.copyWith(
                title: const Text("Home"),
              ),
              builder: (context) => const Center(child: Text("Home")),
            ),
            TabbyTab(
              icon: Icons.search_outlined,
              selectedIcon: Icons.search_rounded,
              label: "Search",
              appBarBuilder: (bar) => bar!.copyWith(
                title: const Text("Search"),
                actions: [
                  IconButton(
                    icon: const Icon(Icons.search),
                    onPressed: () {},
                  ),
                  ...bar.actions!,
                ],
              ),
              builder: (context) => const Center(child: Text("Search")),
            ),
            TabbyTab(
              icon: Icons.settings_outlined,
              selectedIcon: Icons.settings_rounded,
              label: "Settings",
              appBarBuilder: (bar) => bar!.copyWith(
                title: const Text("Settings"),
              ),
              builder: (context) => const Center(child: Text("Settings")),
            ),
          ],
        ),
      );
}

更多关于Flutter标签页管理插件tabby的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter标签页管理插件tabby的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Tabby 是一个用于 Flutter 的标签页管理插件，它可以帮助你轻松地在应用中实现多标签页功能。Tabby 提供了简单易用的 API，使得开发者可以快速集成和管理多个标签页。

安装 Tabby

首先，你需要在 pubspec.yaml 文件中添加 tabby 依赖：

dependencies:
  flutter:
    sdk: flutter
  tabby: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

1. 创建标签页控制器

Tabby 使用 TabbyController 来管理标签页的状态。你可以在 initState 中初始化控制器：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TabbyController _tabbyController;

  @override
  void initState() {
    super.initState();
    _tabbyController = TabbyController();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tabby Example'),
      ),
      body: Tabby(
        controller: _tabbyController,
        tabs: [
          TabbyTab(icon: Icon(Icons.home), label: 'Home'),
          TabbyTab(icon: Icon(Icons.business), label: 'Business'),
          TabbyTab(icon: Icon(Icons.school), label: 'School'),
        ],
        children: [
          Center(child: Text('Home Tab')),
          Center(child: Text('Business Tab')),
          Center(child: Text('School Tab')),
        ],
      ),
    );
  }
}

2. 配置标签页

Tabby 允许你通过 TabbyTab 类来定义每个标签页的图标和标签。你可以在 tabs 参数中传递一个 TabbyTab 列表。

tabs: [
  TabbyTab(icon: Icon(Icons.home), label: 'Home'),
  TabbyTab(icon: Icon(Icons.business), label: 'Business'),
  TabbyTab(icon: Icon(Icons.school), label: 'School'),
],

3. 配置标签页内容

Tabby 的 children 参数用于定义每个标签页的内容。children 中的每个 Widget 对应 tabs 中的一个标签页。

children: [
  Center(child: Text('Home Tab')),
  Center(child: Text('Business Tab')),
  Center(child: Text('School Tab')),
],

4. 控制标签页

你可以使用 TabbyController 来控制标签页的切换。例如，你可以通过 _tabbyController.index 来获取或设置当前选中的标签页索引。

FlatButton(
  onPressed: () {
    _tabbyController.index = 1; // 切换到第二个标签页
  },
  child: Text('Go to Business Tab'),
);

高级用法

自定义标签栏

你可以通过 tabBar 参数来自定义标签栏的外观。例如，你可以使用 TabBar 组件来自定义标签栏的颜色、指示器等。

Tabby(
  controller: _tabbyController,
  tabs: [
    TabbyTab(icon: Icon(Icons.home), label: 'Home'),
    TabbyTab(icon: Icon(Icons.business), label: 'Business'),
    TabbyTab(icon: Icon(Icons.school), label: 'School'),
  ],
  children: [
    Center(child: Text('Home Tab')),
    Center(child: Text('Business Tab')),
    Center(child: Text('School Tab')),
  ],
  tabBar: TabBar(
    indicatorColor: Colors.red,
    labelColor: Colors.blue,
    unselectedLabelColor: Colors.grey,
    tabs: [
      Tab(icon: Icon(Icons.home), text: 'Home'),
      Tab(icon: Icon(Icons.business), text: 'Business'),
      Tab(icon: Icon(Icons.school), text: 'School'),
    ],
  ),
);

动态添加/删除标签页

你可以通过 TabbyController 动态地添加或删除标签页。例如：

FlatButton(
  onPressed: () {
    _tabbyController.addTab(
      TabbyTab(icon: Icon(Icons.settings), label: 'Settings'),
      Center(child: Text('Settings Tab')),
    );
  },
  child: Text('Add Settings Tab'),
);
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！