Flutter：定义自定义TextStyles以在整个应用程序中使用

Question

如何定义一小组自定义TextStyles，然后可以在整个应用中重复使用。自定义TextStyles应基于主题中定义的TextStyles。

我知道如何创建单独的TextStyles（例如）

Theme.of(context).textTheme.title.copyWith(fontWeight: FontWeight.bold,)

Answer 1

您可以创建一个提供获取字体样式的方法的类。

这是一个声明CustomTextStyle类的示例，该类为真正的大文本公开了display5方法。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      title: new Text('Custom Font Example'),
    ),
    body: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        new Card(
          child: new Container(
            child: new Text(
              'Wow',
              style: CustomTextStyle.display5(context),
            ),
          ),
        ),
      ],
    ),
  );
}

Answer 2

或者只是定义一个这样的类并在Text()中使用它

  class AppTextStyle {
  static Function sofiaProRegular = ({Color color, @required double size}) =>
      _sofiaPro(color, size, FontWeight.w400);

  static Function sofiaProMedium = ({Color color, @required double size}) =>
      _sofiaPro(color, size, FontWeight.w500);

  static Function sofiaProBold = ({Color color, @required double size}) =>
      _sofiaPro(color, size, FontWeight.w700);

  static Function latoRegular = ({Color color, @required double size}) =>
      _lato(color, size, FontWeight.w400);

  static TextStyle _sofiaPro(Color color, double size, FontWeight fontWeight) {
    return _textStyle("SofiaPro", color, size, fontWeight);
  }}

  static TextStyle _textStyle(
      String fontFamily, Color color, double size, FontWeight fontWeight) {
    return TextStyle(
        fontFamily: fontFamily,
        color: color,
        fontSize: size,
        fontWeight: fontWeight);
  }

Answer 3

您可以使用飞镖extension：

extension TextExtension on Text {
  Text setStyle(TextStyle style) => copyWith(style: style);

  Text setFontFamily(String fontFamily) =>
      copyWith(style: TextStyle(fontFamily: fontFamily));

  Text copyWith(
      {Key key,
        StrutStyle strutStyle,
        TextAlign textAlign,
        TextDirection textDirection = TextDirection.ltr,
        Locale locale,
        bool softWrap,
        TextOverflow overflow,
        double textScaleFactor,
        int maxLines,
        String semanticsLabel,
        TextWidthBasis textWidthBasis,
        TextStyle style}) {
    return Text(this.data,
        key: key ?? this.key,
        strutStyle: strutStyle ?? this.strutStyle,
        textAlign: textAlign ?? this.textAlign,
        textDirection: textDirection ?? this.textDirection,
        locale: locale ?? this.locale,
        softWrap: softWrap ?? this.softWrap,
        overflow: overflow ?? this.overflow,
        textScaleFactor: textScaleFactor ?? this.textScaleFactor,
        maxLines: maxLines ?? this.maxLines,
        semanticsLabel: semanticsLabel ?? this.semanticsLabel,
        textWidthBasis: textWidthBasis ?? this.textWidthBasis,
        style: style != null ? this.style?.merge(style) ?? style : this.style);
  }
}

例如：

Text('MY TEXT').setStyle(...).setFontFamily(...),

Answer 4

import 'package:flutter/material.dart';

void main() {
   runApp(new MyApp());
}



class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
         title: new Text('Basic Class TextStyle),
    ),
    body: new Center(
         child: new Text('Size Text Test', style: myTextStyleBase.size_A),
  );
}

class myTextStyleBase {
  static const size_A = TextStyle(fontSize: 10);
  static const size_B = TextStyle(fontSize: 30);
}

如果有类似的样式，则可以调用 myTextStyleBase 。如果更改它，只需更改 myTextStyleBase 中的样式。实现的一切也会改变。 https://fluttercrashcourse.com/blog/04-text-style