如何在 Flutter 中为整个应用设置 letterSpacing？答案

【问题标题】：How do I set letterSpacing for whole app in Flutter?如何在 Flutter 中为整个应用设置 letterSpacing？
【发布时间】：2021-06-13 13:01:27
【问题描述】：

我正在使用 Flutter，我知道 letterSpacing 属性对于在字母之间设置一些间距很有用。

我想将它提供给整个应用程序，我的意思是我在应用程序中编写任何文本的任何地方。我想为所有文本设置 1.0 的字母间距。

有什么办法吗？

【问题讨论】：

尝试在MaterialApp的theme属性中设置它。
你知道主题中有哪些属性吗？你试过了吗？
你可以试试textTheme。只需对属性进行试验即可设置并观察哪些文本发生了变化（例如bodyText2: const TextStyle(letterSpacing: 10,)）。

标签： flutter letter-spacing flutter-text flutter-font

【解决方案1】：

您可以定义一个 TextTheme 并为每种类型的文本（标题 1，...）设置自定义 TextStyle。

如果没有提供主题，Flutter 会为您定义一个默认主题。

但是，您可以覆盖或扩展默认值并定义 letterSpacing 属性。我在下面展示了标题 1 和按钮的示例。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        textTheme: TextTheme(
          headline1: Theme.of(context)
              .textTheme
              .bodyText1
              .copyWith(letterSpacing: 1.0),
          button: Theme.of(context)
              .textTheme
              .button
              .copyWith(letterSpacing: 1.0),
        ),
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

【讨论】：

我想要所有的，不仅仅是标题。这意味着它也应该涵盖按钮文本。
还可以扩展按钮的TextStyle。请检查我编辑的答案，我添加了一些代码。

【解决方案2】：

您可以在 constants.dart 文件中定义一个 const DEF_TEXT_STYLE，然后在需要时应用它。

constants.dart

const DEF_TEXT_STYLE = const TextStyle(
    letterSpacing: 1.0);

你可以这样申请：

Text(
   'This is my text',
    style: DEF_TEXT_STYLE,
),

记得导入你的 constants.dart 文件。

否则，您可以覆盖所有 textTheme 数据，类似于 @glavigno 所说的：

在这里你可以看到 Flutter 中所有可用的 textTheme 数据。 DOCS

theme: ThemeData(
        textTheme: TextTheme(
          headline1: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline2: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline3: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline4: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline5: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline6: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          subtitle1: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          subtitle2: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          bodyText1: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          bodyText2: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          button: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          caption: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          overline: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          
        ),
      ),

【讨论】：