【问题标题】:Confusion with the use of CupertinoApp and MaterialApp in FlutterFlutter 中使用 CupertinoApp 和 MaterialApp 的困惑
【发布时间】:2020-05-08 08:20:04
【问题描述】:

我在学习 Flutter 时遇到了 MaterialApp 和 CupertinoApp 两种设计类型。所以,我想知道我们是否要为android和ios创建一个应用程序,我们是否应该为android创建一个单独的应用程序,使用MaterialApp为android创建一个单独的应用程序,为i​​os创建一个单独的应用程序?或者说,如果我们只使用 MaterialApp 创建应用程序,该应用程序的 ios 版本会自动获取 CupertinoApp 吗?

【问题讨论】:

    标签: flutter


    【解决方案1】:

    Material 小部件实现了适用于 iOS、Android 和 Web 的 Material 设计语言。

    Cupertino 小部件根据 Apple 的人机界面指南实现当前的 iOS 设计语言。

    为什么要编写 Cupertino 应用程序?

    Material 设计语言适用于任何平台,而不仅仅是 Android。当您在 Flutter 中编写 Material 应用程序时,它在所有设备上都具有 Material 外观,甚至是 iOS。如果您希望您的应用看起来像一个标准的 iOS 风格的应用,那么您可以使用 Cupertino 库。

    从技术上讲,您可以在 Android 或 iOS 上运行 Cupertino 应用程序,但(由于许可问题)Cupertino 在 Android 上不会有正确的字体。因此,在编写 Cupertino 应用程序时,请使用 iOS 专用设备。

    您将实现一个 Cupertino 风格的购物应用,其中包含三个选项卡:一个用于产品列表,一个用于产品搜索,一个用于购物车。

    如果您想了解更多关于CupertinoMaterial 的信息。检查以下链接:

    Cupertino and Material

    您还可以使用名为 flutter_platform_widgets 的 Flutter 包来检查您的应用在哪个平台上运行并使用特定的小部件(Material 或 Cupertino)

    这个包链接是:flutter_platform_widgets

    希望对你有帮助

    【讨论】:

    • 所以如果我想创建具有适用于 android 的材料设计应用和适用于 iPhone 的 Cupertino 设计的应用,那么我必须创建两个单独的项目?
    • 不,您可以同时拥有一个项目并使用此包pub.dev/packages/flutter_platform_widgets 检查您的应用在@SAM 上运行的平台
    • @void 因此,如果不是单独的项目,我仍然需要在添加小部件时检查每一个点,看看它是 iOS 还是 Android,然后相应地添加小部件。你不觉得它让事情变得更复杂,损害了 Flutter 作为“跨平台”框架的声誉吗?
    • @WaqasYounis 不是“每一个点”,只是您想要调整外观的部分。所以可能是顶级导航、对话框、应用栏。大多数内容可能跨平台保持不变。
    【解决方案2】:

    跨平台框架意味着它可以在多个操作系统中执行。这并不意味着它会自动相应地设计您的应用程序,这取决于开发人员。 您必须检查您的应用运行的平台,您可以通过简单的条件来做到这一点:

    if(Platform.isIOS){
       return CupertinoButton();
    } else if(Platform.IsAndroid) {
        return ElevatedButton();
    }
    

    或者您可以使用flutter_platform_widgets 之类的包来帮助简化您的代码。

    【讨论】:

    • 是的,这个。此外,Flutter 是这样设计的,因为他们看到大多数品牌都试图在所有平台上获得相同的外观和感觉。 medium.com/flutter/… 如果您想要 OEM 组件,您可以使用其他框架,例如 Xamarin(我不推荐!)。
    猜你喜欢
    • 2023-01-24
    • 2021-09-19
    • 2021-08-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-22
    • 1970-01-01
    • 2023-03-29
    相关资源
    最近更新 更多