Flutter 应用程序，Theme.of(context) 样式不适用于文本答案

【问题标题】：Flutter app, Theme.of(context) style doesn't work on textFlutter 应用程序，Theme.of(context) 样式不适用于文本
【发布时间】：2019-12-31 03:38:52
【问题描述】：

尝试将文本颜色应用于列表视图中的标题图块。我用红色文本颜色定义了标题文本样式（是的，我也尝试过使用 Colors.red）。

创建磁贴时，我使用函数 _headerTile。尝试通过 Theme.of(context).textTheme.headline 加载样式。但是，当我这样做时，文本不使用我在标题中定义的三个属性中的任何一个。

是不是我做错了什么？

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'App',
        home: Scaffold(
            appBar: AppBar(
                title: const Text(
              'App',
            )),
            body: _buildList(context)),
        theme: ThemeData(
          textTheme: TextTheme(
            headline: TextStyle(
                color: Color.fromRGBO(255, 0, 0, 1),
                fontSize: 72.0,
                fontWeight: FontWeight.bold),
          ),
        ));
  }
}

Widget _buildList(BuildContext context) => ListView(
      children: [
        _headerTile(context, "About Us")
      ],
    );

ListTile _headerTile(BuildContext context, String title) => ListTile(
      title: Text(title,
          style: Theme.of(context)
              .textTheme
              .headline
      contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 8),
    );

【问题讨论】：

你在哪里调用 _headerTile？
我的 _buildList 函数。我会添加

标签： flutter

【解决方案1】：

这是因为您使用传递给MyApp 的build 函数的相同上下文调用Theme.of(context)。这意味着它返回的ThemeData 将不是您为MaterialApp 定义的那个。

当您通过调用WidgetName.of(context) 获得小部件的状态时，您基本上使用该上下文向上查看小部件层次结构（该上下文所属的小部件的所有父级），直到找到该特定类型的小部件状态.您正在使用的上下文属于 MyApp 小部件，它是 MaterialApp 小部件的父级。

尝试使用routes 或onGenerateRoute 而不是home - 这将为您提供一个上下文来构建位于MaterialApp 小部件下方的路线，这样当您调用Theme.of(context) 时，它将返回预期的ThemeData.

【讨论】：

【解决方案2】：

Ovidiu 使用错误的上下文是正确的。所以我把我的 buildList 函数变成了它自己的 StatelessWidget

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        _headerTile(context, "About Us")
      ],
    );
  }
}

【讨论】：

【解决方案3】：

 您的文本不使用这三个属性中的任何一个，因为 
 .textTheme.headline 是在 text_theme.dart 中预定义的。当您定义
 .textTheme.headline 时，它会根据 text_theme 文件中描述的预定义样式
 对其进行样式设置。您可以使用 
.textTheme.display1 或 .textTheme.display2 查看更改。如果您想要自定义样式
您可以这样做：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'App',
        home: Scaffold(
            appBar: AppBar(
                title: const Text(
                  'App',
                )),
            body: Text("MyApp",style: heading,),
       )
    );
  }
}



final heading =  TextStyle(fontSize: 60.0,
    fontWeight: FontWeight.bold,
    color:Colors.green
);

【讨论】：

【解决方案4】：

删除构建后存在的MaterialApp。然后它不会覆盖您的自定义。

【讨论】：