更改颜色、图标、标签栏颤动 - Dart

在Flutter中，可以很容易地更改TabBar的颜色和样式。本文将介绍如何在Dart中更改TabBar的颜色、图标样式，并实现标签栏颤动效果。

更改TabBar颜色

要更改TabBar的颜色，可以使用TabBar的indicatorColor属性。使用以下代码可以将tab bar的选定标签的底部线更改为蓝色：

TabBar(
  indicatorColor: Colors.blue,
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
  ],
)

更改TabBar图标样式

TabBar可以显示图标。要更改TabBar标签上的图标，可以使用Tab类中的icon属性。可以使用以下代码将Tab 1标签上的图标更改为Icons.home：

TabBar(
  tabs: [
    Tab(
      text: 'Tab 1',
      icon: Icon(Icons.home),
    ),
    Tab(
      text: 'Tab 2',
    ),
  ],
)

实现标签栏颤动效果

要实现标签栏颤动效果，可以使用TabBarView的controller属性。此属性接受一个TabController对象，该对象可让我们监听和更改选定的tab。

要使用TabController，您需要在状态类中创建它：

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;
  
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }
  
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  
  // ...
}

注意上述代码中 with SingleTickerProviderStateMixin，该Mixin为我们提供了vsync对象，它允许我们与Flutter的框架协调动画。在上面的示例中，状态类使用with SingleTickerProviderStateMixin混合器。

创建了TabController之后，可以将它提供给TabBar和TabBarView的controller属性：

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;
  
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }
  
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

要实现颤动效果，我们需要在标签切换时让文本以动画方式移动。我们可以使用AnimatedBuilder来更改文本的位置，并使用AnimatedBuilder中的AnimationController来控制颤动的速度和幅度。

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;
  AnimationController _animationController;
  Animation<double> _animation;
  
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);
  }
  
  @override
  void dispose() {
    _tabController.dispose();
    _animationController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
          ],
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [
                  Container(
                    color: Colors.red,
                  ),
                  Container(
                    color: Colors.blue,
                  ),
                ],
              ),
            ),
            SizedBox(height: 16.0),
            AnimatedBuilder(
              animation: _animation,
              builder: (BuildContext context, Widget child) {
                return FractionalTranslation(
                  translation: Offset(_animation.value - 0.5, 0.0),
                  child: Container(
                    width: MediaQuery.of(context).size.width / 2,
                    height: 2.0,
                    color: Colors.blue,
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

上述代码中，我们使用Padding和Column将TabBarView和动画组合到一个页面中。我们还将动画的底部栏添加到布局的底部。

最后，我们使用AnimatedBuilder来创建动画序列，并将其包装在FractionalTranslation小部件中，以便可以更改其位置。

总体而言，这是一个简单的Dart程序，可以轻松更改TabBar颜色、图标样式，并实现标签栏颤动效果，为您的app增添更多功能。