选中时颤动更改 TabItem 背景

Question

我想问一下如何在选择选项卡时更改选项卡项目的背景颜色？

对不起，我是扑的新手

使用底部标签栏还是标签栏更好？

像这样 ：

我的代码：

          bottomNavigationBar: new TabBar(
            tabs: [
              Tab(
                icon: new Icon(Icons.home),
              ),
              Tab(
                icon: new Icon(Icons.rss_feed),
              ),
              Tab(
                icon: new Icon(Icons.perm_identity),
              ),
              Tab(icon: new Icon(Icons.settings),)
            ],
            labelColor: Colors.yellow,
            indicatorWeight: 1.0,
            unselectedLabelColor: Colors.blue,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.all(5.0),
            indicatorColor: Colors.red,
          ),
          backgroundColor: Colors.black,
        ),
      ),
    );
  }
}

Answer 1

这非常简单，不需要实现全新的自定义标签栏。您只需要创建一个自定义选择指示器，如下所示：

TabBar(
  ...
  indicator: SolidIndicator(),
)

然后SolidIndicator实现：

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

/// Solid tab bar indicator.
class SolidIndicator extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback onChanged]) {
    return _SolidIndicatorPainter(this, onChanged);
  }
}

class _SolidIndicatorPainter extends BoxPainter {
  final SolidIndicator decoration;

  _SolidIndicatorPainter(this.decoration, VoidCallback onChanged)
      : assert(decoration != null),
        super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration != null);
    assert(configuration.size != null);

    final Rect rect = offset & configuration.size;
    final Paint paint = Paint();
    paint.color = Colors.white;
    paint.style = PaintingStyle.fill;
    canvas.drawRect(rect, paint);
  }
}

Answer 2

对于更简单的解决方案，请使用：

indicator: BoxDecoration(color: Colors.white),

Answer 3

bottom: TabBar(
          tabs: [
            Tab(
                // icon: Icon(Icons.contacts),
                text: "All Threads"),
            Tab(text: "Inbox"),
            Tab(text: "Sent"),
          ],
          indicator: BoxDecoration(
            color: Color(0xffff00a8),
            // color: _hasBeenPressed ? Color(0xffffffff) : Color(0xffff00a8),
          ),
          unselectedLabelColor: Color(0xffff00a8),
          indicatorColor: Color(0xffff00a8),
          labelColor: Color(0xffffffff),

          // unselectedLabelColor: Colors.grey,
        ),

Answer 4

我能够通过对文件进行一些更改来实现这一点 tabs.dart。

这是我创建的文件：https://gist.github.com/diegovoper/2ac0f0c127423f03001badc5c98a45f4

你可以这样使用：

        import 'package:yourproject/custom_tabs.dart' as mycustomtab;



        class TabBarDemo extends StatefulWidget {
          @override
          TabBarDemoState createState() {
            return new TabBarDemoState();
          }
        }

        class TabBarDemoState extends State<TabBarDemo>
            with SingleTickerProviderStateMixin {
          TabController _controller;

          @override
          void initState() {
            _controller = new TabController(length: 4, vsync: this);
            _controller.addListener(() {
              setState(() {});
            });
            super.initState();
          }

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

          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              home: Scaffold(
                appBar: AppBar(
                  title: Text('Tabs Demo'),
                ),
                bottomNavigationBar: mycustomtab.TabBar(
                  indicatorColor: Colors.red,
                  controller: _controller,
                  activeBackgroundColor: Colors.red,
                  inactiveBackgroundColor: Colors.black,
                  indicatorWeight: 0.1,
                  tabs: [
                    mycustomtab.MyCustomTab(
                      icon: new Icon(Icons.home),
                    ),
                    mycustomtab.MyCustomTab(
                      icon: new Icon(Icons.rss_feed),
                    ),
                    mycustomtab.MyCustomTab(
                      icon: new Icon(Icons.perm_identity),
                    ),
                    mycustomtab.MyCustomTab(
                      icon: new Icon(Icons.settings),
                    )
                  ],
                ),
                body: TabBarView(
                  controller: _controller,
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                    Icon(Icons.directions_boat),
                  ],
                ),
              ),
            );
          }
        }

结果