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，然后如何为下划线定义另一种样式？

亲切问候

Answer 1

这里是将扩展方法与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)

Answer 2

自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)

Answer 3

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

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

并将其用作

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

查看问题Flutter: Define custom TextStyles for use throughout the app，其中包含此处引用的完整答案。

Answer 4

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

TextStyle(decoration: TextDecoration.underline)

并通过：

TextStyle(decoration: TextDecoration.lineThrough)

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

4 个答案: