flutter - Flutter 标签栏动画有一个小故障

Question

我创建了一个无状态标签栏DefaultTabController，我设置unselectedLabelStyle了较小的 fontSize 和labelStyle较大的 fontSize。

在选项卡之间切换时的动画有一个小故障。

示例代码（更新）：

import 'package:flutter/material.dart';
import 'package:fluttericon/entypo_icons.dart';
import 'package:nixo_exchange/core/widgets/keep_alive_wrapper.dart';
import 'package:nixo_exchange/core/widgets/scroll_glow_remover.dart';
import 'package:nixo_exchange/theme/theme_manager.dart';

class NHeaderTab extends StatelessWidget {
  final List<String> tabText;
  final List<Widget> children;
  final Icon? firstIcon;
  final Icon? secondIcon;
  final EdgeInsetsGeometry? labelPadding;
  final Widget? divider;
  final Function(int index)? onTap;

  const NHeaderTab({
    required this.tabText,
    required this.children,
    this.onTap,
    this.firstIcon,
    this.secondIcon,
    this.labelPadding,
    this.divider,
    Key? key,
  })  : assert(tabText.length == 3, 'Only accept 3 tab'),
        assert(tabText.length == children.length,
            'Number of tab must equal to number of children'),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabText.length,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(
                child: ShaderMask(
                  shaderCallback: (Rect bounds) {
                    return LinearGradient(
                      begin: Alignment.center,
                      end: Alignment.centerRight,
                      colors: [
                        Colors.white,
                        Colors.white.withOpacity(0.0),
                      ],
                      stops: [.85, 1.0],
                    ).createShader(bounds);
                  },
                  child: ScrollGlowRemover(
                    child: TabBar(
                      isScrollable: true,
                      indicatorColor: Colors.transparent,
                      labelPadding: labelPadding,
                      onTap: (index) {
                        if (onTap != null) onTap!(index);
                      },
                      unselectedLabelStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: ThemeManager.of(context).fontSize.large,
                        // color: Colors.red,
                      ),
                      labelStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: ThemeManager.of(context).fontSize.large2x,
                      ),
                      labelColor:
                          ThemeManager.of(context).color.headerLabelColor,
                      unselectedLabelColor: ThemeManager.of(context)
                          .color
                          .headerUnselectedLabelColor,
                      physics: const AlwaysScrollableScrollPhysics(),
                      tabs: List<Tab>.generate(
                          tabText.length, (i) => Tab(text: tabText[i])),
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 3),
              GestureDetector(
                onTap: () {
                  if (onTap != null) onTap!(tabText.length);
                },
                behavior: HitTestBehavior.opaque,
                child: firstIcon ?? const Icon(Icons.addchart),
              ),
              const SizedBox(width: 10),
              GestureDetector(
                onTap: () {
                  if (onTap != null) onTap!(tabText.length + 1);
                },
                behavior: HitTestBehavior.opaque,
                child: secondIcon ?? const Icon(Entypo.search),
              ),
            ],
          ),
          divider ??
              Divider(
                height: 0,
                thickness: 0.05,
                color: ThemeManager.of(context).color.dividerColor,
              ),
          Expanded(
            child: KeepAliveWrapper(
              child: TabBarView(
                children: children,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

标签： flutterdartanimationtabs