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

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

Answer 3

我找到了一种更好的方法来替代默认的字体大小，方法是覆盖实物文本主题。

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

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

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

结果：

Answer 4

扩大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
            )
      )
);

Answer 5

您应该将DefaultTextStyle小部件用作父小部件

应用于没有显式样式的后代Text小部件的文本样式

使用方法示例：

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

More details in official documentation

Answer 6

fontSize:styleCustom.fontSize!=null ? styleCustom.fontSize:10), ##您做得对，除了具有默认值（如字体大小）但希望覆盖它的情况（##

Answer 7

有几种可能性：

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的更多信息。

颤振默认字体大小

7 个答案:

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

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