【问题标题】:How to change the entire theme's text color in Flutter?如何在 Flutter 中更改整个主题的文本颜色?
【发布时间】:2018-08-18 14:44:42
【问题描述】:

我可能缺少一些明显的东西。是否有 一个 属性可以改变 Flutter 应用中所有文本的颜色?

我现在的做法是,在我的 MaterialApp 中:

theme: ThemeData(
    textTheme: Theme.of(context).textTheme.copyWith(
          body1:
              Theme.of(context).textTheme.body1.apply(color: Colors.pink),
          body2:
              Theme.of(context).textTheme.body2.apply(color: Colors.pink),
          display1:
              Theme.of(context).textTheme.display1.apply(color: Colors.pink),
          display2:
              Theme.of(context).textTheme.display2.apply(color: Colors.pink),
          ... // and so on
        ),
    ),
),

我也试过了

textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.pink),

但这适用于下拉文本,而不是常规文本。同样,displayColor 适用于 appBar 文本和 InputDecoration 文本,但不适用于常规文本。我的代码中似乎没有任何decorationText,所以我不确定它的用途。

我注意到有一个 textSelectionColor 属性,但仅适用于 TextField 小部件。

【问题讨论】:

    标签: text colors flutter


    【解决方案1】:

    我认为TextTheme.apply 是你想要的。 bodyColor 将应用于 headlinetitlesubheadbuttonbody1body2displayColor 将应用于 display1display4caption。如果同时指定 bodyColordisplayColor 并使用相同的颜色值,则会有效地更改所有文本样式的文本颜色。

    例子:

    final newTextTheme = Theme.of(context).textTheme.apply(
      bodyColor: Colors.pink,
      displayColor: Colors.pink,
    );
    

    【讨论】:

    • 太棒了!没有意识到bodyColordisplayColor 组合起来会涵盖所有情况。
    • 字体大小如何?如何设置所有页面的字体大小
    • 如何设置背景色?例如:文本 black87 和背景 white54?
    【解决方案2】:

    对于整个应用,您可以在Material 应用小部件中设置textTheme 属性。

    MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(),
          bodyText2: TextStyle(),
        ).apply(
          bodyColor: Colors.orange, 
          displayColor: Colors.blue, 
        ),
      ),
    ) 
    

    【讨论】:

    • 如何设置字体大小?
    • @JohnJoe 在TextStyle,你可以使用fontSize
    • 这个特性只有“fontSizeFactor”和“fontSizeDelta”参数,没有“fontsize”
    【解决方案3】:

    要提供一种似乎可以在不直接设置所有 Text 样式的情况下工作的替代方法,是在 Widget 树中的位置更改 DefaultTextStyle 的样式以使其生效

    return DefaultTextStyle(
      style: TextStyle(color: Colors.pink),
      child: _YOUR_WIDGETS_
    )
    

    【讨论】:

    • 当您想为应用程序的特定部分强制使用 TextStyle 时,这是一个很好的答案。在我的情况下,其他答案均无效。
    【解决方案4】:

    可能有点晚了……但你可以用这个:

    ThemeData(
        primaryTextTheme: Typography(platform: TargetPlatform.iOS).white,
        textTheme: Typography(platform: TargetPlatform.iOS).white,
    )
    

    【讨论】:

    • tgetPlatform 说的是 iOS,但它也适用于 Android。
    • 这个对我很有效。去掉platform参数,就可以和android一起工作了(因为platform参数的默认值是android)。
    【解决方案5】:

    我的正在处理这个:

    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText2: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-10-29
      • 1970-01-01
      • 2019-04-20
      • 1970-01-01
      • 2023-03-26
      • 2019-12-18
      • 2023-03-11
      • 2019-10-05
      相关资源
      最近更新 更多