Flutter自定义TabBar插件fw_tab_bar的使用

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

Flutter自定义TabBar插件fw_tab_bar的使用

tab_bar_widget

tab_bar_widget 是由 Umang Pipaliya 开发的一个带有动画功能的可定制化标签栏组件。

特性

  • 动画标签指示器
  • 可定制的样式和装饰
  • 与 GetX 状态管理库轻松集成

截图

Tab Bar Example

Demo

Tab Bar Animation

安装

在你的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  fw_tab_bar: ^0.0.1

示例

以下是一个完整的示例,展示了如何使用 fw_tab_bar 插件来创建一个自定义的 TabBar。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Tab Bar Example')),
        body: Center(
          child: TabBarWidget(
            // 设置第一个标签页的文本
            firstTab: 'Tab 1',
            // 设置第二个标签页的文本
            secondTab: 'Tab 2',
            // 当标签页变化时的回调函数
            onTabChanged: (int index) {
              debugPrint('Selected tab: $index');
            },
            // 选中标签页的装饰
            selectedTabDecoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(50)),
              border: Border.fromBorderSide(BorderSide(color: Color(0xFFD9D9D9))),
              color: Color(0xFFFFFFFF),
            ),
            // 背景装饰
            backgroundBoxDecoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(50)),
              color: Color(0xFF2F2F2F),
            ),
            // 选中标签页的文本样式
            selectedTabTextStyle: const TextStyle(
              fontWeight: FontWeight.bold,
              color: Color(0xFFFFFFFF),
              fontSize: 16,
            ),
            // 未选中标签页的文本样式
            unselectedTabTextStyle: const TextStyle(
              fontWeight: FontWeight.normal,
              color: Color(0xFF2F2F2F),
              fontSize: 16,
            ),
          )
        ),
      ),
    );
  }
}

更多关于Flutter自定义TabBar插件fw_tab_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义TabBar插件fw_tab_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用自定义TabBar插件fw_tab_bar的代码示例。假设你已经在pubspec.yaml文件中添加了fw_tab_bar依赖,并且已经运行了flutter pub get

首先,确保你的pubspec.yaml文件中包含以下依赖:

dependencies:
  flutter:
    sdk: flutter
  fw_tab_bar: ^最新版本号  # 替换为实际的最新版本号

然后,你可以按照以下步骤使用fw_tab_bar插件。这里假设fw_tab_bar提供了一些自定义的TabBar和Tab功能,但具体的API可能会有所不同,请参考插件的官方文档以获取最新和最准确的API信息。以下是一个示例代码:

import 'package:flutter/material.dart';
import 'package:fw_tab_bar/fw_tab_bar.dart'; // 假设插件的导入路径是这样的

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom TabBar Demo'),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: FWTabBar(
            controller: _tabController,
            tabs: [
              FWTab(
                icon: Icon(Icons.directions_car),
                text: 'Tab 1',
              ),
              FWTab(
                icon: Icon(Icons.directions_transit),
                text: 'Tab 2',
              ),
              FWTab(
                icon: Icon(Icons.directions_bike),
                text: 'Tab 3',
              ),
            ],
            indicatorColor: Colors.blue,
            indicatorSize: TabBarIndicatorSize.label,
            labelStyle: TextStyle(fontSize: 16),
            unselectedLabelStyle: TextStyle(fontSize: 14),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Content of Tab 1')),
          Center(child: Text('Content of Tab 2')),
          Center(child: Text('Content of Tab 3')),
        ],
      ),
    );
  }
}

// 假设FWTabBar和FWTab是插件提供的自定义组件,以下是一个假设的API定义,具体请参考插件文档
// class FWTabBar extends StatelessWidget {
//   final TabController controller;
//   final List<FWTab> tabs;
//   final Color indicatorColor;
//   final TabBarIndicatorSize indicatorSize;
//   final TextStyle labelStyle;
//   final TextStyle unselectedLabelStyle;

//   FWTabBar({
//     required this.controller,
//     required this.tabs,
//     this.indicatorColor = Colors.blue,
//     this.indicatorSize = TabBarIndicatorSize.tab,
//     this.labelStyle = const TextStyle(),
//     this.unselectedLabelStyle = const TextStyle(),
//   });
// }

// class FWTab {
//   final Widget icon;
//   final String text;

//   FWTab({required this.icon, required this.text});
// }

请注意,上面的FWTabBarFWTab类只是假设的API定义,实际使用时,你需要参考fw_tab_bar插件的官方文档来了解其具体的API和用法。

此外,如果fw_tab_bar插件提供了自定义样式或行为,你可能需要在FWTabBarFWTab构造器中传递额外的参数。确保查阅最新的插件文档,以便正确使用这些自定义功能。

回到顶部