首页 > 解决方案 > 如何在颤动中为标签栏的活动和非活动状态设置不同的图标并保持指示器动画

问题描述

我有五个标签,如下所示

Tab(
    icon: SvgPicture.asset(
      _getSvgName(
        tabIndex: 0,
      ),
    ),
    child: Text(
      '홈',
      style: TextStyle(
        fontSize: 12.0,
      ),
    ),
  ),

决定svg图标名称的代码如下

String _getSvgName({
    @required int tabIndex,
  }) {
    String root;

    if (tabIndex == 0) {
      root = 'assets/svgs/tab-home';
    } else if (tabIndex == 1) {
      root = 'assets/svgs/tab-posts';
    } else if (tabIndex == 2) {
      root = 'assets/svgs/tab-news';
    } else if (tabIndex == 3) {
      root = 'assets/svgs/tab-alarm';
    } else if (tabIndex == 4) {
      root = 'assets/svgs/tab-profile';
    } else {
      throw Exception('index out of bounds');
    }

    if (tabIndex == _tabController.index) {
//      root = root + '.svg';

      root = root + '-active.svg';
    } else {
      root = root + '.svg';
    }

    return root;
  }

我也在监听 tabController 的变化,这样我就可以更新 tabbar 的当前索引。问题是,一旦我运行setState()以反映选项卡索引更改,指示器的滑动动画就会被终止 - 它会立即转移到下一个选项卡,而不是像默认行为那样平滑滑动。我该如何克服这个问题?

标签: flutter

解决方案


推荐阅读