如何在Flutter中定义自定义文本主题？

Question

如何制作自己的文本主题样式？ 我只能找到默认的文本主题，但这并不够。

textTheme: TextTheme(
  body1: TextStyle(),
  body2: TextStyle(),
  button: TextStyle(),
  caption: TextStyle(),
  display1: TextStyle(),
  display2: TextStyle(),
  display3: TextStyle(),
  display4: TextStyle(),
  headline: TextStyle(),
  overline: TextStyle(),
  subhead: TextStyle(),
  subtitle: TextStyle(),
  title: TextStyle(),
),

我想举例说明，比如一些文本需要添加删除线，另一些文本需要添加下划线等。我考虑覆盖body2样式来实现下划线样式，但是如何定义另一个删除线的样式呢？

此致敬礼

- stuckedoverflow

---

看看这个问题 https://dev59.com/ZFcP5IYBdhLWcg3wTIMt - chemamolins

你尝试过使用copyWith方法吗？https://docs.flutter.io/flutter/material/TextTheme/copyWith.html - Ian

哇，我相信这就是我正在寻找的东西...所以@chemamolins如果你提供一个答案，我可以接受它。 - stuckedoverflow

Answer 1

您可以创建一个类来保存您的样式，然后从应用程序的任何地方调用它。

class CustomTextStyle {
  static TextStyle display5(BuildContext context) {
    return Theme.of(context).textTheme.display4.copyWith(fontSize: 192.0);
  }
}

然后将其用作

Text(
   'Wow',
   style: CustomTextStyle.display5(context),
),

请查看问题Flutter：为整个应用程序定义自定义TextStyles，其中包含此处引用的完整答案。

- chemamolins

Answer 2

这里是使用带有lineThrough的扩展方法的替代方案:

extension CustomStyles on TextTheme {
 TextStyle get error => const TextStyle(decoration: TextDecoration.lineThrough, fontSize: 20.0, color: Colors.blue, fontWeight: FontWeight.bold);

然后你可以像这样使用它：

Text("your text", style: Theme.of(context).textTheme.error)

- SK7

---

请注意，扩展遵循与Dart的其余部分相同的隐私规则，因此，如果您在需要使用它之外声明它，则还需要导入文件源！更多信息可以在此处找到：https://dart.dev/guides/language/extension-methods - Breno Teodoro

Answer 3

自Dart 2.7发布以来，您还可以使用扩展方法：

extension CustomStyles on TextTheme {
  TextStyle get error {
    return TextStyle(
      fontSize: 18.0,
      color: Colors.red,
      fontWeight: FontWeight.bold,
    );
  }
}

然后你可以这样使用它：

Text(error, style: Theme.of(context).textTheme.error)

- Josh

Answer 4

您可以设置TextStyle()选项以进行进一步的自定义。对于需要设置规格的部分，您需要设置decoration选项。对于下划线：

TextStyle(decoration: TextDecoration.underline)

并且对于划线：

TextStyle(decoration: TextDecoration.lineThrough)

- Nae

---

是的，但我想将它放入主题中，这样我就不会一遍又一遍地重复相同的内容，并且使维护易于更改。我的意思是，我需要一个下划线的风格主题，另一个是穿过线的主题，而body1和body2已经有了它们的用途。那么我该如何定义一个新的主题集？ - stuckedoverflow

@rxlky 我不明白。是将 TextStyle 或 TextTheme 分配给一个单独的变量，然后重复使用它吗？ - Nae

据我所知，对于每个单独的文本，只能使用TextStyle并且需要重复设置。那么，如何使用TextTheme添加新样式呢？例如body3、body4之类的样式。 - stuckedoverflow