如何在标签栏指示器中给出渐变线 [英] How to give a gradient line in tab bar indicator

问题描述

我具有选项卡栏功能，其中显示了甜甜圈图和车辆列表，但我需要显示用户选择的选项卡，我在TabBar中具有indicatorColor，但需要填充渐变线，如图所示请帮帮我。

I have a tab bar functionality in which I show a Donut chart and list of vehicles but I need to show which tab the user selected for that I have indicatorColor in TabBar but I need to fill with gradient line as shown in the image please help me out.

PS：如果可能的话，请让我知道如何给主题颜色赋予主色作为渐变的主要色彩？

PS: If possible please let me know how to give theme color means primary color in main as a gradient???

return Scaffold(
    body: new DefaultTabController(
        length: 2,
        child: new Column(
          children: <Widget>[
            new Container(
              width: 1200.0,
              child: new Container(
                color: Colors.white,
                child: new TabBar(
                  labelColor: Colors.black,
                  tabs: [
                    Tab(
                      child: new Text("Visual",
                      style: new TextStyle(fontSize: 20.0)
                      ),
                    ),

                    Tab(
                      child: new Text("Tabular",
                      style: new TextStyle(fontSize: 20.0)), 
                    ),
                  ],
                ),
              ),
            ),
            new Expanded(
              child: new TabBarView(
                children: [
                  Tab(
                    child: new RefreshIndicator(
                      child: new Text('DONUT CHART'),
                      onRefresh: refreshList,
                      key: refreshKey1,
                    ),
                  ),
                  Tab(
                    child: new RefreshIndicator(
                      child: new Text('List of vehicles'),
                      onRefresh: refreshList,
                      key: refreshKey2,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

推荐答案

我认为唯一的方法是创建您的自定义TabBar。
您可以从tabs.dart复制TabBar的代码，并在_TabBarState中必须更改 Decoration get _indicator 。

I think the only way is to create your custom TabBar. You can copy the code of TabBar from tabs.dart and in _TabBarState you have to change Decoration get _indicator.

类似的东西：

return ShapeDecoration(shape: UnderlineInputBorder(), gradient: LinearGradient(
    colors: [Colors.blue, Colors.green]));

UPD：

知道了。 ShapeDecoration不起作用。有了它，我可以为整个选项卡设置渐变。对于下划线-同一文件中有 _IndicatorPainter 类。并且有此类的 Rect indicatorRect 方法。

Got it. ShapeDecoration doesn't work. With it I can set gradient for whole tab. For underline - there is _IndicatorPainter class in same file. And there is Rect indicatorRect method of this class.

return Rect.fromLTWH(tabLeft, 0.0, tabRight - tabLeft, tabBarSize.height);

此字符串返回rect进行修饰。如果您更改它-您可以得到下划线：

This string return rect for decoration. If you change it - you can get underline:

return Rect.fromLTWH(tabLeft, tabBarSize.height - 4.0, tabRight - tabLeft, 4.0);

在内装饰得到_indicator 忘记更改返回UnderlineTabIndicator 到

return ShapeDecoration(shape: RoundedRectangleBorder(), gradient: LinearGradient(
    colors: [Colors.blue, Colors.green]));

结果

这篇关于如何在标签栏指示器中给出渐变线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！