如何在颤动中为标签栏下划线添加渐变？

Posted 2023-02-23

【中文标题】如何在颤动中为标签栏下划线添加渐变？

【英文标题】：How to add gradient to tab bar underline in flutter?

【发布时间】：2021-09-01 16:47:37

【问题描述】：

我正在寻找将渐变添加到标签栏下划线的方法。谢谢。

【问题讨论】：

问题已经解决enter link description here

【参考方案1】：

您必须直接在接受BoxDecoration 的TabBar 小部件中设置indicator 属性，然后调整其他设置，例如indicatorPadding、indicatorWeight。

以下是一段工作代码示例。您可以在 dartpad here 中查看现场演示。

import 'package:flutter/material.dart';

void main() 
  runApp(TabBarDemo());


class TabBarDemo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.black,
            bottom: TabBar(                    
              indicator: BoxDecoration(             
                gradient: LinearGradient(
                  colors: [
                    Colors.green,
                    Colors.blue,
                    Colors.red,
                  ],
                ),
                borderRadius: BorderRadius.all(
                  Radius.circular(5),
                ),
              ),
              indicatorWeight: 5,
              indicatorPadding: EdgeInsets.only(top:40),              
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );