Flutter动态标签栏插件shifting_tabbar的使用

Flutter 动态标签栏插件 shifting_tabbar 的使用

Shifting TabBar

shifting_tabbar 是一个为 Flutter 框架设计的自定义标签栏组件。该组件的设计灵感来源于 Rally 项目（材料设计研究的一部分）。

开始使用

在 pubspec.yaml 中添加包

在你的 pubspec.yaml 文件中添加 shifting_tabbar 包：

dependencies:
    ...
    shifting_tabbar: ^1.0.2
导入包

在你的 Dart 文件中导入 shifting_tabbar 包：

import 'package:shifting_tabbar/shifting_tabbar.dart';
基本用法

这个组件需要与 TabController 配合使用。如果你不手动指定控制器，则必须使用 DefaultTabController 作为祖先组件。

new ShiftingTabBar(
    tabs: [
        ShiftingTab(
            icon: Icon(Icons.directions_bike),
            text: "Test 1",
        ),
        ShiftingTab(
            icon: Icon(Icons.directions_car),
            text: "Test 2"
        ),
        ShiftingTab(
            icon: Icon(Icons.directions_transit),
            text: "Test 3"
        ),
    ],
)

注意： 如果你不手动指定控制器，必须使用 DefaultTabController 作为祖先组件！

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 shifting_tabbar 组件。

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

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      // 定义 TabBar 和 TabBarViews 的控制器
      home: DefaultTabController(
        length: 5,
        child: Scaffold(
          // 使用 ShiftingTabBar 替换 appBar
          appBar: ShiftingTabBar(
            // 指定背景颜色，如果不指定将使用应用主题的 primaryColor
            color: Colors.grey,
            // 手动更改亮度以改变文本颜色风格为深色或浅色，否则会根据背景颜色自动决定
            // brightness: Brightness.dark,
            tabs: [
              // 使用 ShiftingTab 小部件而不是 Tab 小部件以获得滑动动画效果
              ShiftingTab(
                icon: const Icon(Icons.home),
                text: 'Test 1',
              ),
              ShiftingTab(
                icon: const Icon(Icons.directions_bike),
                text: 'Test 2',
              ),
              ShiftingTab(
                icon: const Icon(Icons.directions_car),
                text: 'Test 3',
              ),
              ShiftingTab(
                icon: const Icon(Icons.directions_transit),
                text: 'Test 4',
              ),
              ShiftingTab(
                icon: const Icon(Icons.directions_boat),
                text: 'Test 5',
              ),
            ],
          ),
          // 其他部分与默认的 TabBar 小部件完全相同
          body: const TabBarView(
            children: [
              Icon(Icons.home),
              Icon(Icons.directions_bike),
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_boat),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter动态标签栏插件shifting_tabbar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是如何在Flutter中使用shifting_tabbar插件来创建一个动态标签栏的示例代码。shifting_tabbar插件允许你创建可滚动的标签栏，其中标签的数量可以动态变化。

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

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

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

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

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

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  List<String> _tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];

  void _onTabSelected(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _addTab() {
    setState(() {
      _tabs.add('Tab ${_tabs.length + 1}');
    });
  }

  void _removeTab() {
    if (_tabs.length > 1) {
      setState(() {
        _tabs.removeAt(_tabs.length - 1);
        if (_selectedIndex >= _tabs.length) {
          _selectedIndex = _tabs.length - 1;
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shifting TabBar Demo'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: _addTab,
            tooltip: 'Add Tab',
          ),
          IconButton(
            icon: Icon(Icons.remove),
            onPressed: _removeTab,
            tooltip: 'Remove Tab',
            enabled: _tabs.length > 1,
          ),
        ],
      ),
      body: Center(
        child: Text('Selected Tab: ${_tabs[_selectedIndex]}'),
      ),
      bottomNavigationBar: ShiftingTabBar(
        controller: TabController(length: _tabs.length, vsync: this),
        currentIndex: _selectedIndex,
        onTabSelected: _onTabSelected,
        tabs: _tabs.map((String tab) => Tab(text: tab)).toList(),
        indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.blue,
        ),
        labelStyle: TextStyle(fontSize: 16),
        unselectedLabelStyle: TextStyle(fontSize: 16, color: Colors.grey),
        scrollPhysics: BouncingScrollPhysics(),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：确保在pubspec.yaml中添加了shifting_tabbar依赖。

  2. 主应用结构：MyApp是一个无状态小部件，它创建了一个MaterialApp并设置了主题和主页。

  3. 主页：MyHomePage是一个有状态小部件，包含了一个标签栏和一些操作按钮来动态添加和删除标签。

  4. 标签管理：_tabs列表存储了标签的文本，_selectedIndex保存了当前选中的标签索引。

  5. 按钮操作：_addTab和_removeTab方法用于动态添加和删除标签，并更新UI。

  6. 标签栏：使用ShiftingTabBar小部件创建了一个可滚动的标签栏，配置了标签样式和指示器样式。

  7. TabController：使用TabController来管理标签的选择状态，并与ShiftingTabBar绑定。

运行这段代码，你将看到一个带有动态标签栏的Flutter应用，你可以通过点击“Add Tab”和“Remove Tab”按钮来动态地添加和删除标签。

回到顶部