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

Posted 2023-02-22

【中文标题】从 Flutter 中的 Tab 文本中删除奇怪的渐变

【英文标题】：Remove strange gradient from Tab text in Flutter

【发布时间】：2021-08-26 07:58:04

【问题描述】：

当我在 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'),
          ],
        ),
      ),
    );
  

【参考方案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'),
],

我希望这对你有用:)

【讨论】：

是的，我注意到您可以使用 child。这样做的问题是它似乎切断了任何超出基线的文本的底部（文本“descenders”）。

复制我的代码并将其粘贴到 Flutter DartPad 中，看看我的意思。

我复制了你的代码，但它与照片的结果不同！

在 Flutter DartPad 中？还是在 ios/android 中？