从 Flutter 中的 Tab 文本中删除奇怪的渐变

Question

当我在 TabBar 中增大文本大小时，我开始看到一个渐变，该渐变自动应用于我的 Tab 实例。截图：

注意垂直轴上文本的渐变。怎么可能删除这个？到目前为止，我发现的唯一方法是将 Tab 替换为自定义的 Text 小部件，但随后我失去了开箱即用的图标功能和各种其他功能。

这是我的代码的简化版本，它会产生问题：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: MainScreen(),
    );
  }
}
      
class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}
      
class _MainScreenState extends State<MainScreen> with SingleTickerProviderStateMixin {
  late TabController tabController;
  
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 4, vsync: this);
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          labelStyle: TextStyle(fontSize: 40),
          controller: tabController,
          labelPadding: EdgeInsets.all(20),
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
            Tab(text: 'Tab 4'),
          ],
        ),
      ),
    );
  }
}

Answer 1

你的代码在我的显示中有不同的结果！无论如何，您可以使用 'child' 而不是 'text'：

tabs: [
   Tab(child: Text('Tab 1'),),
   Tab(child: Text('Tab 2'),),
   Tab(child: Text('Tab 3'),),
   Tab(child: Text('Tab 4'),),
],

更新

由于您的文本大小不寻常且大于标准，并且由于选项卡大小是固定的，因此您可以自定义选项卡类并将固定大小更改为您想要的大小。根据需要更改这些尺寸：

final double _kTabHeight = 48.0;
final double _kTextAndIconTabHeight = 72.0;

'custom_tab.dart' 类是：

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

class CustomTab extends StatelessWidget {

  final double _kTabHeight = 80.0;
  final double _kTextAndIconTabHeight = 72.0;

  /// Creates a material design [TabBar] tab.
  ///
  /// At least one of [text], [icon], and [child] must be non-null. The [text]
  /// and [child] arguments must not be used at the same time. The
  /// [iconMargin] is only useful when [icon] and either one of [text] or
  /// [child] is non-null.
  const CustomTab({
    Key? key,
    this.text,
    this.icon,
    this.iconMargin = const EdgeInsets.only(bottom: 10.0),
    this.child,
  }) : assert(text != null || child != null || icon != null),
        assert(text == null || child == null),
        super(key: key);

  /// The text to display as the tab's label.
  ///
  /// Must not be used in combination with [child].
  final String? text;

  /// The widget to be used as the tab's label.
  ///
  /// Usually a [Text] widget, possibly wrapped in a [Semantics] widget.
  ///
  /// Must not be used in combination with [text].
  final Widget? child;

  /// An icon to display as the tab's label.
  final Widget? icon;

  /// The margin added around the tab's icon.
  ///
  /// Only useful when used in combination with [icon], and either one of
  /// [text] or [child] is non-null.
  final EdgeInsetsGeometry iconMargin;

  Widget _buildLabelText() {
    return child ?? Text(text!, softWrap: false, overflow: TextOverflow.fade);
  }

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));

    final double height;
    final Widget label;
    if (icon == null) {
      height = _kTabHeight;
      label = _buildLabelText();
    } else if (text == null && child == null) {
      height = _kTabHeight;
      label = icon!;
    } else {
      height = _kTextAndIconTabHeight;
      label = Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            child: icon,
            margin: iconMargin,
          ),
          _buildLabelText(),
        ],
      );
    }

    return SizedBox(
      height: height,
      child: Center(
        child: label,
        widthFactor: 1.0,
      ),
    );
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(StringProperty('text', text, defaultValue: null));
    properties.add(DiagnosticsProperty<Widget>('icon', icon, defaultValue: null));
  }
}

并像这样使用它：

tabs: [
   CustomTab(text: 'Tab 1'),
   CustomTab(text: 'Tab 2'),
   CustomTab(text: 'Tab 3'),
   CustomTab(text: 'Tab 4'),
],

我希望这对你有用:)