Flutter 是不是会在 iOS 中自动显示 Cupertino UI，在 Android 中使用单一代码库显示 Material？

Posted 2023-02-23

【中文标题】Flutter 是不是会在 iOS 中自动显示 Cupertino UI，在 Android 中使用单一代码库显示 Material？

【英文标题】：Does Flutter automatically display Cupertino UI in iOS and Material in Android with a single codebase?Flutter 是否会在 iOS 中自动显示 Cupertino UI，在 Android 中使用单一代码库显示 Material？

【发布时间】：2019-08-06 14:55:43

【问题描述】：

我需要知道 Flutter 是否会在 ios 上渲染 iOS Cupertino 风格，在 android 上渲染 Material 风格。在开始使用 Flutter 开发我的应用程序之前，我想知道这一点。

如果不是，我将如何在一个代码中管理两个不同的 UI？我不可能在代码的任何地方都使用 if/else。

【参考方案1】：

您应该尝试图库应用：https://play.google.com/store/apps/details?id=io.flutter.demo.gallery&hl=en 在其中，当您按下菜单按钮时，您可以将平台机制设置为 Mountain View (Android) 或 Cupertino (iOS)。这样您就可以看到它在任一平台上的外观。

这是一个根据平台选择 Cupertino 或 Material 代码的示例：https://medium.com/flutter-io/do-flutter-apps-dream-of-platform-aware-widgets-7d7ed7b4624d 据我所知，您必须选择这样的小部件。

【参考方案2】：

这些功能正在开发中。我建议查看这个库：https://pub.dartlang.org/packages/flutter_platform_widgets

除此之外，即使没有这个库，您也可以做很多事情。一切都取决于您的资源、要求和项目的复杂性。

例如，如果您是单独工作或在一个小团队中工作，您的项目的复杂性可能不会太大，并且您的整个应用程序最多只包含几十个 Widget 派生类。在这种情况下，也许您可​​以特意在自定义 Widget 类中对平台自适应行为进行编程，这样您就可以长期使用它们。

这个工作流程并不总是适用，一开始可能看起来很复杂，但以后会变得更自然。

【讨论】：

谷歌是否直接参与了这项功能的开发？

在使用 Flutter 平台小部件一年多之后，我现在建议不要使用它们。他们仍然需要大量定制（阅读：重复代码），我们最终最终将所有内容重新移植回 Material 设计。

@rgisi 库比蒂诺脚手架怎么样？我想要一个持久的底部导航栏，而 Cupertino Scaffold/Tabbar 似乎为这个问题提供了最好的解决方案

【参考方案3】：

最近，Flutter 为 Switch、SwitchListTile 和 CircularProgressIndicator 添加了自适应构造函数，这将有助于在单个代码库中进一步推进平台感知小部件。虽然这些是目前仅有的三个，但期待未来更多！

【讨论】：

CircularProgressIndicator.adaptive() 也

这里是 Flutter 2.2.0 之前的所有版本中发布/完善的所有自适应小部件：自适应文本字段、自适应图标、自适应 TextInputAction、popup_menu 的自适应更多图标、VisualDensity.adaptivePlatformDensity。 flutter.dev/docs/development/tools/sdk/release-notes/…

【参考方案4】：

下面的简单实现：

class AdaptiveSwitch extends StatelessWidget 
  const AdaptiveSwitch(Key key,
      @required this.value,
      @required this.onChanged,
      this.activeColor,
      this.dragStartBehavior = DragStartBehavior.start)
      : assert(dragStartBehavior != null),
        super(key: key);

  final bool value;

  final ValueChanged<bool> onChanged;

  final Color activeColor;

  final DragStartBehavior dragStartBehavior;

  @override
  Widget build(BuildContext context) 
    return Theme.of(context).targetPlatform = TargetPlatform.iOS
        ? CupertinoSwitch(
            value: value,
            activeColor: activeColor,
            onChanged: onChanged,
            dragStartBehavior: dragStartBehavior,
          )
        : Switch(
            value: value,
            activeColor: activeColor,
            onChanged: onChanged,
            dragStartBehavior: dragStartBehavior,
          );