如何让CupertinoApp中的Material组件与CupertinoThemeData亮度颜色一致？

我在CupertinoApp中使用了Material风格的NavigationRail组件，期望所有组件保持统一的主题样式。尝试将CupertinoApp嵌套在Theme组件内部，让ThemeData和CupertinoThemeData使用相同的platformBrightness值，但最终出现了黑白色调不匹配的问题。

相关代码 #

主Widget构建代码

@override
Widget build(BuildContext context) {
  final Brightness platformBrightness = WidgetsBinding.instance.window.platformBrightness;
  return Theme(
    data: ThemeData(
      brightness: platformBrightness,
    ),
    child: CupertinoApp(
      onGenerateTitle: (context) => S.of(context).AppName,
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        S.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,
      theme: CupertinoThemeData(
        brightness: platformBrightness,
      ),
      home: const Scaffold(
        resizeToAvoidBottomInset: false,
        body: SafeArea(
          bottom: false,
          child: HomePage(),
        ),
      ),
    ),
  );
}

HomePage及NavigationRail相关代码

return Row(
  children: <Widget>[
    SingleChildScrollView(
      controller: ScrollController(),
      scrollDirection: Axis.vertical,
      child: IntrinsicHeight(
        child: AppRightSideControls(_controller.future),
      ),
    ),
    const VerticalDivider(thickness: 1, width: 1),
    // 主内容区域
    Expanded(
      ...
    ),
  ],
);


class AppRightSideControls extends StatelessWidget {
  ...

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _webViewControllerFuture,
      builder:
          (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
        ...
        return NavigationRail(
          labelType: NavigationRailLabelType.all,
          ...
        );
      },
    );
  }
}

问题截图 #

问题出在组件嵌套顺序上：你把CupertinoApp放在了Theme内部，但CupertinoApp会创建独立的主题上下文，覆盖外层Theme的配置，导致Material组件无法正确继承与Cupertino一致的主题参数。

调整嵌套顺序，把Theme放在CupertinoApp内部，确保Material组件能获取到正确的主题上下文：

@override
Widget build(BuildContext context) {
  final Brightness platformBrightness = WidgetsBinding.instance.window.platformBrightness;
  return CupertinoApp(
    onGenerateTitle: (context) => S.of(context).AppName,
    localizationsDelegates: const [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      S.delegate
    ],
    supportedLocales: S.delegate.supportedLocales,
    theme: CupertinoThemeData(
      brightness: platformBrightness,
    ),
    home: Theme(
      data: ThemeData(
        brightness: platformBrightness,
        // 可选：同步更多主题参数，让Material组件与Cupertino风格更统一
        colorScheme: ColorScheme.fromSeed(
          seedColor: CupertinoColors.systemBlue.resolveFrom(context),
          brightness: platformBrightness,
        ),
      ),
      child: const Scaffold(
        resizeToAvoidBottomInset: false,
        body: SafeArea(
          bottom: false,
          child: HomePage(),
        ),
      ),
    ),
  );
}

如果希望Material组件样式更贴近Cupertino风格，还可以在ThemeData中手动对齐更多细节：

• 调整textTheme匹配Cupertino的字体样式
• 以CupertinoColors作为Theme的颜色基础
• 同步iconTheme等组件样式参数

调整后，NavigationRail就能和CupertinoApp的主题保持一致的黑白色调了。

内容的提问来源于stack exchange，提问作者Andy