You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将Flutter文本样式设置为Material headline样式?

如何将Flutter文本设置为Material headline样式?

要把Text组件的样式改成Material的headline样式,直接利用Flutter主题系统里的文本样式即可,有两种常用方式:

  • 直接使用默认主题的headline样式
    借助Theme.of(context)获取当前主题的文本样式配置,Material 3中推荐使用headlineLarge/headlineMedium/headlineSmall(对应不同层级的标题),代码示例:

    Text(
      "Lorem Ipsum",
      style: Theme.of(context).textTheme.headlineLarge,
    )
    

    如果你还在使用Material 2,可以用headline1到headline6来对应不同尺寸的标题样式。

  • 自定义主题中的headline样式
    如果需要统一修改全局的headline样式,可以在MaterialApp的主题配置里自定义:

    MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(
          headlineLarge: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
            color: Colors.black87,
          ),
        ),
      ),
      home: const YourScreen(),
    )
    

    配置完成后,再用Theme.of(context).textTheme.headlineLarge就能调用到你自定义的样式了。

内容的提问来源于stack exchange,提问作者HH.

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.09 04:20:21