Flutter自定义标签页插件fancy_tab的使用

Fancy Tab 插件简介

它是一个精美且美观的标签栏设计。它可以高度定制，并且易于与 PageView.builder 配合使用。

安装

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

dependencies:
  fancy_tab: ^0.0.4

导入

在 Dart 文件中导入插件：

import 'package:fancy_tab/fancy_tab.dart';

支持平台

如何使用

可用参数

以下是 FancyTab 的构造函数及其参数说明：

FancyTab({
  Key? key,
  required this.selected,
  required this.labelsList,
  required this.length,
  this.onTap,
  this.textDirection = TextDirection.ltr,
  this.selectedColor = const Color(0xFF2196F3),
  this.unSelectedColor = const Color(0xA69E9E9E),
  this.selectedTextColor = const Color(0xFFFFFFFF),
  this.unSelectedTextColor = const Color(0xFF7A7A7A),
  this.borderColor = const Color(0xFF000000),
  this.separator = 5,
  this.tabBarHeight = 50,
});

参数表

示例代码

以下是一个完整的示例代码，展示如何使用 fancy_tab 插件创建一个带有动态背景色的标签页：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:fancy_tab/fancy_tab.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int selected = 0; // 当前选中的标签页索引
  List<String> labelsList = ['测试 1', '测试 2', '测试 3']; // 标签页文本
  Color? backgroundColor; // 动态背景颜色
  PageController? pageController = PageController(); // 页面控制器

  [@override](/user/override)
  void initState() {
    super.initState();
    randomColorGenerator(); // 初始化随机背景色
  }

  // 随机生成背景颜色
  randomColorGenerator() {
    setState(() {
      backgroundColor = Color((Random().nextDouble() * 0xFFFFFF).toInt())
          .withOpacity(1.0);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: const Text('Fancy Tab 示例'),
        ),
        body: Container(
          color: backgroundColor, // 设置动态背景色
          child: Column(
            children: [
              Center(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: FancyTab(
                    selected: selected, // 当前选中的标签页索引
                    labelsList: labelsList, // 标签页文本列表
                    length: labelsList.length, // 标签页数量
                    selectedColor: Colors.orange, // 选中标签的颜色
                    unSelectedColor: Colors.deepOrangeAccent, // 未选中标签的颜色
                    onTap: (val) { // 点击标签页回调
                      setState(() {
                        selected = val; // 更新当前选中的标签页索引
                        pageController!.jumpToPage(val); // 跳转到对应的页面
                        randomColorGenerator(); // 更新背景颜色
                      });
                    },
                  ),
                ),
              ),
              Expanded(
                child: PageView.builder(
                  onPageChanged: (val) { // 页面切换时更新选中标签
                    setState(() {
                      selected = val;
                      randomColorGenerator();
                    });
                  },
                  controller: pageController, // 页面控制器
                  itemCount: labelsList.length, // 页面数量
                  itemBuilder: (context, index) {
                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Center(
                          child: Container(
                            padding: const EdgeInsets.all(10),
                            child: Text(
                              labelsList[index].toUpperCase(), // 显示大写的标签文本
                              style: Theme.of(context).textTheme.headline2,
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}