Flutter应用程序，Theme.of（上下文）样式不适用于文本

Question

尝试将文本颜色应用于列表视图中的标题图块。我用红色文字定义了标题文字样式（是的，我也使用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),
    );

Answer 1

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

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

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

Answer 2

   Your text doesn't use any of the these three properties because 
 .textTheme.headline is predefined in text_theme.dart . When you define
 .textTheme.headline , it styles it according to predefined style
 described in text_theme file. You can see the changes by using 
.textTheme.display1 or .textTheme.display2 . If you want your custom style 
you can do it this way :

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
);

Answer 3

Ovidiu使用错误的上下文是正确的。因此，我将buildList函数变成了自己的StatelessWidget

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

Answer 4

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