Flutter：未用CupertinoApp时CupertinoContextMenu长按丢失文本样式的解决办法

问题描述 #

在MaterialApp环境下使用CupertinoContextMenu，长按触发菜单时，嵌套的Text组件会丢失原有样式。切换为CupertinoApp包裹可解决此问题，但不想替换整个应用的根组件；单独用CupertinoTheme包裹无效。环境：Flutter 3.16.3、iOS 17.0。

示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CupertinoContextMenu.builder(
        actions: [
          CupertinoContextMenuAction(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text("Test"),
          ),
        ],
        builder: (context, animation) {
          return const Center(
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.amber),
              child: Text('Hello world'),
            ),
          );
        },
      ),
    );
  }
}

预期效果：

实际效果：

原因分析 #

CupertinoContextMenu触发时会弹出一个新的Cupertino风格路由，该路由的上下文默认依赖Cupertino主题配置。在MaterialApp环境下，这个新路由的上下文无法正确继承到足够的文本样式配置，导致Text组件使用默认的无样式渲染。

解决方案 #

方案1：给Text组件直接指定样式 #

直接为Text组件绑定当前Material主题的文本样式，避免依赖新路由的上下文：

builder: (context, animation) {
  return Center(
    child: DecoratedBox(
      decoration: const BoxDecoration(color: Colors.amber),
      child: Text(
        'Hello world',
        style: Theme.of(context).textTheme.bodyLarge, // 绑定Material主题样式
      ),
    ),
  );
},

方案2：用CupertinoTheme包裹子组件并配置正确的文本主题 #

在builder的返回组件外层包裹CupertinoTheme，将Material主题的文本样式映射到CupertinoTextThemeData中：

builder: (context, animation) {
  return CupertinoTheme(
    data: CupertinoThemeData(
      textTheme: CupertinoTextThemeData(
        textStyle: Theme.of(context).textTheme.bodyLarge!,
      ),
    ),
    child: const Center(
      child: DecoratedBox(
        decoration: BoxDecoration(color: Colors.amber),
        child: Text('Hello world'),
      ),
    ),
  );
},

方案3：全局配置Cupertino主题（可选） #

如果应用中多处使用Cupertino组件，可以在MaterialApp中全局配置CupertinoThemeData，确保所有Cupertino组件的上下文都能获取到正确样式：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
      theme: ThemeData.light(),
      builder: (context, child) {
        return CupertinoTheme(
          data: CupertinoThemeData(
            textTheme: CupertinoTextThemeData(
              textStyle: Theme.of(context).textTheme.bodyLarge!,
            ),
          ),
          child: child!,
        );
      },
    );
  }
}

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