为何Flutter的Material组件无法自动适配iOS并调用Cupertino组件？

问题背景 #

我正在阅读Simone Alessandria所著的《Flutter Cookbook（第二版）》第6章，书中提供了一段根据当前平台（iOS/Android）选择对应组件显示对话框的代码，示例效果如下：

对应的实现代码：

import 'package:flutter/cupertino.dart'; // 导入iOS专属设计的Cupertino组件库
import 'package:flutter/material.dart'; // 导入Android专属设计的Material组件库

// PlatformAlert类定义
class PlatformAlert {
  final String title; // 对话框标题
  final String message; // 对话框消息内容
  const PlatformAlert(
      {required this.title,
      required this.message}); // 初始化标题和消息的构造函数

  // 根据平台（iOS或Android）显示对话框的方法
  void show(BuildContext context) {
    final platform =
        Theme.of(context).platform; // 获取当前平台（iOS或Android）
    if (platform == TargetPlatform.iOS) {
      _buildCupertinoAlert(context); // 显示Cupertino（iOS）对话框
    } else {
      _buildMaterialAlert(context); // 显示Material（Android）对话框
    }
  }

  // 构建并显示Material（Android）对话框的私有方法
  void _buildMaterialAlert(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text(title), // 对话框标题
          content: Text(message), // 对话框消息内容
          actions: [
            TextButton(
              child: const Text('Close'), // 关闭按钮
              onPressed: () =>
                  Navigator.of(context).pop(), // 点击关闭对话框
            ),
          ],
        );
      },
    );
  }

  // 构建并显示Cupertino（iOS）对话框的私有方法
  void _buildCupertinoAlert(BuildContext context) {
    showCupertinoDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text(title), // 对话框标题
          content: Text(message), // 对话框消息内容
          actions: [
            CupertinoButton(
              child: const Text('Close'), // 关闭按钮
              onPressed: () =>
                  Navigator.of(context).pop(), // 点击关闭对话框
            ),
          ],
        );
      },
    );
  }
}

我的疑问是：为什么Material组件无法自动识别iOS平台并切换为Cupertino组件？这样的写法看起来要重复编写大量相似代码，是不是我有什么知识点遗漏了？

核心原因 #

Flutter的Material组件库本身是为遵循Material Design规范设计的，它的定位就是Android风格的组件集合，不会自动切换到Cupertino组件——这是两个独立的组件库，各自对应不同的设计语言，Flutter不会默认做跨库的自动替换，目的是让开发者完全掌控UI风格：你可以选择在iOS上也用Material组件，也可以选择用Cupertino，或者混合使用，这种设计给了开发者更大的自由度。

减少重复代码的方案 #

你觉得代码重复是因为手动分别实现了两种对话框，但其实有更简洁的方式：

1. 抽离通用逻辑封装 #

把重复的部分（比如标题、消息、关闭按钮的逻辑）抽离出来，只针对不同平台的组件做差异化处理：

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

class PlatformAlert {
  final String title;
  final String message;
  const PlatformAlert({required this.title, required this.message});

  void show(BuildContext context) {
    final platform = Theme.of(context).platform;
    if (platform == TargetPlatform.iOS) {
      showCupertinoDialog(
        context: context,
        builder: (_) => _buildCupertinoContent(context),
      );
    } else {
      showDialog(
        context: context,
        builder: (_) => _buildMaterialContent(context),
      );
    }
  }

  // 抽离通用内容，只保留平台差异化部分
  Widget _buildMaterialContent(BuildContext context) {
    return AlertDialog(
      title: Text(title),
      content: Text(message),
      actions: [_buildCloseButton(context, isCupertino: false)],
    );
  }

  Widget _buildCupertinoContent(BuildContext context) {
    return CupertinoAlertDialog(
      title: Text(title),
      content: Text(message),
      actions: [_buildCloseButton(context, isCupertino: true)],
    );
  }

  // 通用关闭按钮逻辑
  Widget _buildCloseButton(BuildContext context, {required bool isCupertino}) {
    if (isCupertino) {
      return CupertinoButton(
        child: const Text('Close'),
        onPressed: () => Navigator.of(context).pop(),
      );
    } else {
      return TextButton(
        child: const Text('Close'),
        onPressed: () => Navigator.of(context).pop(),
      );
    }
  }
}

2. 使用第三方库简化 #

如果不想自己封装，可以用专门的平台适配第三方库，它会自动根据平台切换对应的组件，你只需要写一套代码，库会帮你处理平台差异，示例代码逻辑如下：

// 示例逻辑（需先引入对应平台适配库）
showPlatformDialog(
  context: context,
  builder: (_) => PlatformAlertDialog(
    title: Text(title),
    content: Text(message),
    actions: [
      PlatformTextButton(
        child: const Text('Close'),
        onPressed: () => Navigator.of(context).pop(),
      ),
    ],
  ),
);

3. 自定义Theme扩展（仅样式对齐） #

你也可以通过自定义ThemeData，将部分组件的样式对齐到目标平台，但这只适用于样式调整，无法完全替换组件本身（比如AlertDialog和CupertinoAlertDialog是不同的Widget，样式修改无法达到完全一致的交互和视觉效果）。

总结 #

Flutter不自动切换组件是为了保留UI控制权，避免强制风格统一。你可以通过逻辑抽离封装或者第三方库来减少重复代码，不用完全手动实现两套逻辑。

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