Flutter自定义TabBar插件banai_tabbar的使用

该插件旨在解决Flutter中标签栏字体放大和缩小时的抖动问题。

1. labelStyle 的 fontSize 属性不能设置。
2. unselectedLabelStyle 必须设置 fontSize 属性。
3. unselectedLabelStyle 的 fontSize 属性必须大于0。
4. labelFontSize 替换 labelStyle 的 fontSize 属性。

预览

视频链接

https://user-images.githubusercontent.com/21274377/128660549-64f90736-beb6-4ab4-b45e-fd4245765c79.mp4

开始使用

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

dependencies:
  banai_tabbar: ^最新版本

使用非常简单

以下是一个完整的示例代码：

import 'dart:ui';

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
  [@override](/user/override)
  bool get wantKeepAlive => true;

  late TabController _tabConroller;
  List tablist = [
    '推荐',
    '娱乐',
    '体育',
    '军事',
    '国际',
    '科技',
    '汽车',
    '我关注的',
  ];

  [@override](/user/override)
  void initState() {
    super.initState();
    _tabConroller = TabController(vsync: this, length: tablist.length, initialIndex: 3);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    super.build(context);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件Banai_Appbar示例'),
        ),
        body: Column(
          children: [
            Container(
              height: 50,
              width: MediaQuery.of(context).size.width, // 获取当前屏幕宽度
              child: BanaiTabbar(
                controller: _tabConroller,
                isScrollable: true, // 是否可滚动
                indicator: const BoxDecoration(), // 指示器样式
                unselectedLabelColor: Colors.black38, // 未选中标签颜色
                labelColor: Colors.pinkAccent, // 选中标签颜色
                unselectedLabelStyle: TextStyle(
                  fontSize: 16, // 未选中标签字体大小
                ),
                labelFontSize: 30, // 选中标签字体大小
                onChange: (int currentIndex) { // 切换标签时的回调
                  print(currentIndex);
                },
                onAnimatedChange: (double animatedValue, double diff, int currentIndex, int nextIndex) { // 动画变化时的回调
                  print("动画值: $animatedValue  差值: $diff  当前索引: $currentIndex  下一个索引: $nextIndex");
                },
                tabs: [
                  for (var i = 0; i < tablist.length; i++)
                    Text(tablist[i]) // 动态生成标签
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: _tabConroller,
                children: [
                  for (var i = 0; i < tablist.length; i++)
                    Text(tablist[i]) // 动态生成标签页面
                ]
              )
            )
          ],
        ),
      ),
    );
  }
}