Flutter 默认字体大小

Posted 2023-02-23

技术标签:

【中文标题】Flutter 默认字体大小【英文标题】：Flutter default font size 【发布时间】：2019-10-05 06:14:12 【问题描述】：

我想为 Flutter 中的 Text 小部件设置默认字体大小。我知道我可以在主题中设置默认字体系列，但没有默认字体大小参数。

我只是想知道我的自定义小部件是实现得好还是我做错了方法？

import 'package:flutter/material.dart';

/// Custom Text with a default font Monospace and a default font size.
class CustomText extends Text 
  /// Custom Text Constructor extend of Text constructor.
  CustomText(this.dataCustom,
      this.styleCustom = const TextStyle(), this.textAlignCustom)
      : super(dataCustom,
            style: styleCustom.copyWith(fontFamily: 'Monospace', fontSize: 12),
            textAlign: textAlignCustom);

  /// The text to display.
  ///
  /// This will be null if a [textSpan] is provided instead.
  final String dataCustom;

  /// If non-null, the style to use for this text.
  ///
  /// If the style's "inherit" property is true, the style will be merged with
  /// the closest enclosing [DefaultTextStyle]. Otherwise, the style will
  /// replace the closest enclosing [DefaultTextStyle].
  final TextStyle styleCustom;

  /// How the text should be aligned horizontally.
  final TextAlign textAlignCustom;

谢谢

【问题讨论】：

【参考方案1】：

我通过覆盖材料文本主题找到了默认字体大小的更好方法。

参考：https://api.flutter.dev/flutter/material/TextTheme-class.html

例如： body1 用于普通文本小部件所以对于所有文本小部件的红色

 theme: ThemeData(
        textTheme: TextTheme(body1: TextStyle(backgroundColor: Colors.red))
      )

结果：

【讨论】：

OP 的问题急需一个主题。这应该是公认的答案。你给别人的分数非常好，但你自己的答案比他的好。不错的工作。更喜欢约定而不是配置。这实际上是最好的答案。正是需要的。我不知道为什么它没有被标记为接受这并不适用于任何地方，例如当 Text 是 FlatButton 中的子项时。另外，当问题是关于字体大小时，为什么该示例显示如何设置默认背景颜色？你应该在 TextStyle 中使用 fontSize @RobinManoli 我的重点是使用主题，所以背景颜色可以作为示例【参考方案2】：

Flutter 主题定义的不是一种，而是多种默认字体大小。使用的大小取决于情况，例如Text 小部件通常使用body 样式，但如果在按钮内部使用相同的小部件将使用button 样式。

我找到了两种增加 Flutter 应用程序所有字体大小的方法。

简单解决方案：调整默认主题

MaterialApp(
  theme: ThemeData(
    textTheme: Theme.of(context).textTheme.apply(
          fontSizeFactor: 1.1,
          fontSizeDelta: 2.0,
        ),
  ),
  ...
);

生成的字体大小为 (originalSize * fontSizeFactor + fontSizeDelta)。所以在上面的例子中，所有的字体大小都增加了 10%，然后又增加了 2。

控制更多的解决方案：手动定义所有尺寸

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 18.0),
      bodyText2: TextStyle(fontSize: 16.0),
      button: TextStyle(fontSize: 16.0),
      ...  // and so on for every text style
    ),
  ),
  ...
);

样式的完整列表可以在https://api.flutter.dev/flutter/material/TextTheme-class.html找到。

【讨论】：

【参考方案3】：

你应该prefer composition over inheritance。

class Mono12Text extends StatelessWidget 
  final String data;
  final TextAlign align;
  final TextStyle style;

  Mono12Text(
    this.data, 
    this.align,
    TextStyle style = const TextStyle(),
  ) : style = style.copyWith(
          fontFamily: 'Monospace',
          fontSize: 12,
        );

  @override
  Widget build(BuildContext context) 
    return Text(
      data,
      textAlign: align,
      style: style,
    );

【讨论】：

【参考方案4】：

扩展 amorenew 的答案。

您可以在 MaterialApp() Widget 中设置 fontSize。但是请注意，它不适用于所有小部件，例如 Flatbutton 和 ExpansionTile。

void main() 
  runApp(myApp());


class myApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
   return MaterialApp(
        title: "My Flutter App",
        theme: ThemeData(
          textTheme: TextTheme(body1: TextStyle(fontSize: 20.0)),
        ...
   );

因此，如果您希望样式也适用于 FlatButton：

FlatButton(
   child:
      Text("my text",
         style: Theme.of(context).textTheme.body1,
      )
);

而且，如果您希望 fontSize 与其他特定样式一起应用：

FlatButton(
   child:
      Text("my text",
         style:
            TextStyle(
               fontWeight: FontWeight.bold,
               color: Colors.black,
            fontSize: Theme.of(context).textTheme.body1.fontSize
            )
      )
);

【讨论】：

【参考方案5】：

有几种可能：

1- 使用DefaultTextStyle 小部件：

只需将此小部件用作父级示例：

 DefaultTextStyle(
      style: TextStyle(
        fontSize: 17,
        fontWeight: FontWeight.bold,
       ),
      child: Text('Hello World') // I don't need to define a style for this Text widget anymore 
 ),

输出：

我不再需要为此 Text 小部件定义样式，因为它将默认为 DefaultTextStyle 小部件样式。

另请参见：AnimatedDefaultTextStyle，它在给定的持续时间内平滑地动画文本样式的变化。DefaultTextStyleTransition, 采用提供的动画来动画文本样式的变化随着时间的推移顺利。

2-使用预定义的textTheme：

事实上，您所要做的就是选择一个预定义的 textTheme 并使用或修改它：每个 textTheme 都有一个预定义的 TextStyle，您可以直接使用或在使用前进行修改。这里是预定义的 textTheme 列表：

 headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2, bodyText1, bodyText2, caption, button, overline, display4, display3, display2, display1, headline, title, subhead, subtitle, body2, body1

用法：

Text('Hello World' , style: Theme.of(context).textTheme.headline6,),

输出：

你也可以改变这个TextStyle的值，然后重用它。

修改：

把它放在你的MaterialApp 小部件中。

theme: ThemeData(
        textTheme: TextTheme(
          headline6: TextStyle(fontSize: 15 , color: Colors.blue),
          bodyText1: TextStyle(backgroundColor: Colors.red , color: Colors.blue) ,
          )
      ),

输出：

我的代码是here 了解更多关于 TextTheme here 的信息。

【讨论】：

【参考方案6】：

您应该使用DefaultTextStyle 小部件作为父小部件

应用于没有明确样式的后代文本小部件的文本样式

使用示例：

return DefaultTextStyle(
              style: TextStyle(fontSize: 42, color: Colors.blue),
              child: (...)
);