颤振默认字体大小

Question

我希望Flutter中的文本小部件具有默认字体大小。我知道我可以在主题中设置默认字体系列，但是没有默认字体大小参数。

我只是想知道我的自定义窗口小部件是否实施正确，还是我做错了方法？

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;
}

谢谢

Answer 1

Flutter 主题定义的不是一种，而是多种默认字体大小。使用的大小取决于情况，例如文本小部件通常使用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找到。

Answer 2

您应该更喜欢组合而不是继承。

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,
    );
  }
}

Answer 3

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

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

例如：body1用于普通的文本小部件，因此红色表示所有文本小部件

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

结果：

Answer 4

有几种可能：

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都有一个预定义的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) ,
          )
      ),

输出 ：

我的代码在这里在这里
了解有关 TextTheme 的更多信息。

Answer 5

对 amorenew 的答案稍加扩展。

您可以在 MaterialApp() 小部件内设置 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
            )
      )
);