使用 Flutter 在本地覆盖 CupertinoTheme

如何解决使用 Flutter 在本地覆盖 CupertinoTheme

我正在使用 Cupertino 小部件，需要在本地覆盖我的全局 CupertinoTheme，并为此使用 CupertinoTheme 小部件。我的用例是在图像顶部显示文本时强制使用一些“深色”主题，但问题很普遍。

在下面的示例中，我尝试更改一种文本样式的字体大小（从 42 像素到 21 像素），但没有应用：两个文本具有相同的大小（第二个应该是 21 像素高）。

似乎 CupertinoTheme.of(context) 没有读取覆盖样式，与 documentation 相反

后代小部件可以通过调用 CupertinoTheme.of

来检索当前的 CupertinoThemeData

这是一个示例（可以在 DartPad 上进行测试）：

import 'package:Flutter/cupertino.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: true,theme: CupertinoThemeData(
        brightness: Brightness.dark,textTheme: CupertinoTextThemeData(
          navLargeTitleTextStyle: TextStyle(fontSize: 42)
        )
      ),home: Home()
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinopageScaffold(
      child: Column(
        children: [
           Text(
             'Hello,World #1!',style: CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle
            ),CupertinoTheme(
              data: CupertinoThemeData(
                textTheme: CupertinoTextThemeData(
                  navLargeTitleTextStyle: TextStyle(fontSize: 21)
                )
              ),child: Text(
                'Hello,World #2!',style:
                CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle
              ),),]
      )
    );
  }
}

解决方法

您从错误的上下文中获取主题。上下文必须是 CupertinoTheme 小部件的后代（或者更确切地说是将从它创建的元素）。试试：

CupertinoTheme(
  data: ...,child: Builder(
    builder: (context) => ... CupertinoTheme.of(contex)...
  )
)

通过 build 方法的 content 参数，您可以访问 build-method 的小部件的祖先所做的任何事情。无论您在 build 方法中做什么，都不会对其产生任何影响。

小部件是创建元素树的方法。您在 build(er) 方法中获得的上下文参数是为该小部件创建的元素（的简化接口）。 Foo.of(context) 方法通常搜索上下文的祖先元素以找到 Foo。 （在某些情况下有缓存，所以它不是一个缓慢的搜索。）当你在构建方法中创建一个小部件树时，你只是在创建小部件；元素将在该构建方法竞争后创建。使用 Builder 小部件，就像我上面所做的那样，延迟在 Builder 的 builder 参数中创建小部件，直到为 Builder（及其上方的小部件）创建元素之后。所以这是解决您的问题的一种方法。另一种方法是创建一个新的 StatelessWidget，其中包含代码中 CupertinoTheme 的子代小部件，因为它同样会延迟这些小部件的创建，直到为该无状态小部件（及其父代）创建元素之后。