[TDTabar] unselectedLabelStyle labelStyle 不生效

[wiscgazf]

tdesign-flutter 版本

tdesign_flutter: ^0.1.5

重现链接

No response

重现步骤

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:xjy_study/utils/color_util.dart';

class StudyDetail extends StatefulWidget {
  const StudyDetail({super.key});

  @override
  State<StatefulWidget> createState() => _StudyDetailState();
}

class _StudyDetailState extends State<StudyDetail> with SingleTickerProviderStateMixin {
  final List<String> _tabs = const ['待上课时', '已上课时'];

  late TabController _tabController;

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

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _getQueryParams();
  }

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

  void _getQueryParams() {
    final ModalRoute<Object?>? currentRoute = ModalRoute.of(context);
    if (currentRoute != null) {
      final Map<String, dynamic> params = currentRoute.settings.arguments as Map<String, dynamic>;
      print('aa=${params}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('课程详情'),
        leadingWidth: 40.w,
      ),
      body: ExtendedNestedScrollView(
        onlyOneScrollInBody: true,
        physics: ClampingScrollPhysics(),
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverToBoxAdapter(
              child: _CourseItemDetail(),
            )
          ];
        },
        body: Column(
          children: [
            TDTabBar(
                controller: _tabController,
                height: 44.h,
                backgroundColor: Colors.white,
                indicatorColor: ColorUtil.primaryColor(),
                labelColor: ColorUtil.primaryColor(),
                unselectedLabelStyle: TextStyle(fontSize: 12.sp, color: Colors.red),
                labelStyle: TextStyle(
                    fontSize: 18.sp,
                    color: ColorUtil.primaryFontColor(),
                    fontWeight: FontWeight.w500),
                indicatorWidth: 16.w,
                showIndicator: true,
                tabs: _tabs
                    .map((e) => TDTab(
                          text: '$e',
                        ))
                    .toList()),
            Expanded(
                child: TDTabBarView(
                    isSlideSwitch: true,
                    controller: _tabController,
                    children: _tabs
                        .map((e) => Center(
                              child: Text('data$e'),
                            ))
                        .toList()))
          ],
        ),
      ),
    );
  }
}

/// 课程详情描述
class _CourseItemDetail extends StatelessWidget {
  const _CourseItemDetail();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(15.w, 10.h, 15.w, 8.h),
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.only(top: 3.h),
                height: 16.h,
                alignment: Alignment.center,
                padding: EdgeInsets.symmetric(horizontal: 6.w),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    gradient: LinearGradient(colors: [
                      ColorUtil.hexColorString('#FFB442'),
                      ColorUtil.hexColorString('#FF9A00')
                    ])),
                child: Text(
                  '数学',
                  style: TextStyle(color: Colors.white, fontSize: 12.sp, height: 1.h),
                ),
              ),
              SizedBox(
                width: 8.w,
              ),
              Expanded(
                  child: Text(
                '集合图形离开撒娇的案例三等奖集合图形离开撒娇的案例',
                style: TextStyle(
                    color: ColorUtil.primaryFontColor(),
                    fontSize: 14.sp,
                    overflow: TextOverflow.ellipsis,
                    height: 1.5.h),
                maxLines: 2,
              ))
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 5.h, bottom: 12.h),
            child: Text(
              '2020年8月15日开始，共20节课',
              style: TextStyle(fontSize: 12.sp, color: ColorUtil.subFontColor()),
            ),
          ),
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(28.w),
                child: Container(
                  width: 28.w,
                  height: 28.w,
                  color: Colors.grey,
                ),
              ),
              SizedBox(
                width: 10.w,
              ),
              Text(
                '某某老师',
                maxLines: 1,
                style: TextStyle(
                    fontSize: 12.sp,
                    color: ColorUtil.subFontColor(),
                    overflow: TextOverflow.ellipsis),
              )
            ],
          )
        ],
      ),
    );
  }
}

期望结果

No response

实际结果

No response

Flutter版本

3.19.6

设备与机型信息

No response

系统版本

No response

补充说明

关联issue:#108

IssueShoot

• 预估时长：3
• 期望完成时间：2025-1-24
• 开发难度：中
• 参与人数：1
• 需求对接人：zflyluo
• 验收标准：支持自定义Lable的文字大小，如果能使用labelStyle的和unselectedLabelStyle中设置的字体尺寸更好。
• 备注：最终激励以实际提交 pr 并合并为准

[github-actions]

👋 @wiscgazf，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[shizhe2018]

unselectedLabelStyle labelStyle 设置的字体大小，字体颜色无效是由于 TDTab这个组件内属性有默认的字体大小，导致覆盖了设置的字体大小，如果需要设置字体大小请在TDTab的属性size设置。 如果要设置TDTabBar选择颜色和未选择颜色请使用labelColor，unselectedLabelColor

[wiscgazf]

TDTab 只能设置 大中小三个吧，如果想单独设置某个Tab的字体大小 就没法做到了，常见的 就是 选中当前Tab字体大，其他默认字体小一点

[Luozf12345]

感谢您的建议，这种场景确实是比较常见的，我们后面看下怎么更好地支持这种场景吧。感谢反馈~

[wiscgazf]

好的 可以顺便在考虑下Tabbar切换，某个字体变大出现Tabbar 字体会抖动（现在tabbar问题）

[chaselen]

是的，我也遇到这个问题。按楼上所说，但是TDTab的字体大小也是无法设置的，只能设置TDTabSize.small和large，字体大小看源码分别是14和16。

[github-actions]

这个 Issue 被标记为了过时 stale ，因为它已经持续 30 天没有任何活动了。删除 stale 标签或评论，否则将在 7 天内关闭。

[github-actions]

这个 Issue 被标记为了过时 stale ，因为它已经持续 30 天没有任何活动了。删除 stale 标签或评论，否则将在 7 天内关闭。

[github-actions]

此 Issue 被自动关闭，因为它自被标记为过时 stale 以来已闲置 7 天。

[github-actions]

这个 Issue 被标记为了过时 stale ，因为它已经持续 30 天没有任何活动了。删除 stale 标签或评论，否则将在 7 天内关闭。

[github-actions]

这个 Issue 被标记为了过时 stale ，因为它已经持续 30 天没有任何活动了。删除 stale 标签或评论，否则将在 7 天内关闭。