【问题标题】:Flutter Material to Cupertino transformation issuesFlutter Material 到 Cupertino 的转换问题
【发布时间】:2019-07-24 17:59:16
【问题描述】:

我正在做一个几乎完成了 80% 的项目。我所有的项目都是在材料设计上完成的。现在我正在尝试为 Android 和 IOS 移动 Cupertino UI 主题。

当我尝试从 Material design 迁移到 Cupertino UI 时,我遇到了很多问题,尤其是在以下领域..

  1. TextFormField:我无法在 Cupertino 设计中找到与表单一起使用的 TextFormField...
  2. Validator:如何验证CupertinoTextField,因为没有验证器方法
  3. App Drawer:现在我有 App Drawer。当我转向适用于 IOS 和 Android 的 Cuprtino UI 设计时,我应该放弃 App Drawer 吗?
  4. 如何给出 CupertinoButton 的宽度?
  5. 当我尝试迁移到 Cuprtio 时,ListTitle 引发异常。例外情况是“找不到 Material 祖先的特定小部件是:ListTitle”

另外,如何在 CupertinoPageScaffold 页面内混合非 Cuprtino 小部件?

感谢您的宝贵时间

【问题讨论】:

  • 你有什么问题?
  • 我添加了更多细节...

标签: flutter flutter-cupertino


【解决方案1】:
  1. TextFormField:我无法在 Cupertino 设计中找到与表单一起使用的 TextFormField...
  2. Validator:如何验证CupertinoTextField,因为没有验证器方法

在 Cupertino 中没有带有验证和表单方法的 TextField。在 iOS 开发中,您将编写自己的表单验证代码并相应地调用它们。在 Flutter 中也不例外。 一种典型的方法是创建一个内部_FormData 类来为每个CupertinoTextField 存储TextEditingController,然后在CupertinoButtononPressed 回调中验证它们。

  1. App Drawer:现在我有 App Drawer。当我转向适用于 IOS 和 Android 的 Cuprtino UI 设计时,我应该放弃 App Drawer 吗?

同样,Drawer 小部件仅存在于 Material design 中。您可能在市场上的各种 iOS 应用程序中看到的所有抽屉都是由第三方提供商定制的 UIViews。 Apple Human Interface Guidelines明确表示:

避免使用抽屉。现代应用中很少使用抽屉,不鼓励使用。面板、弹出框、侧边栏和拆分视图是显示补充窗口内容的首选。

您可能需要考虑使用CupertinoPageScaffoldCupertinoTabScaffold,具体取决于您的设计要求。

  1. 如何给出 CupertinoButton 的宽度?

您可以用ContainerSizedBoxFractionallySizedBox 包裹您的CupertinoButton

Container(
    width: 300 // or whatever width you want,
    child: CupertinoButton(
        child: Text('Submit'),
        color: Theme.of(context).primaryColor,
        onPressed: () {
            // Write your callback here
        },
    ),
)

SizedBox(
    width: 300 // or whatever you want,
    child: CupertinoButton(
        child: Text('Submit'),
        color: Theme.of(context).primaryColor,
        onPressed: () {
            // Write your callback here
        },
    ),
)

FractionallySizedBox(
    widthFactor: 0.5 // or whatever you want,
    child: CupertinoButton(
        child: Text('Submit'),
        color: Theme.of(context).primaryColor,
        onPressed: () {
            // Write your callback here
        },
    ),
)

一般来说,Container 应该可以解决问题。如果您将CupertinoButton 包装在Flex 小部件中(例如ListViewColumn),您可能需要使用SizedBoxFractionallySizedBox。可以参考SizedBoxFractionallySizedBox的API文档

  1. 当我尝试迁移到 Cuprtio 时,ListTitle 引发异常。例外情况是“找不到 Material 祖先的特定小部件是:ListTitle”

正如错误日志所说:

在材料设计中,大多数小部件在概念上都“打印”在一张材料上。在 Flutter 的材质库中,该材质由 Material Widget 表示。例如,渲染墨水飞溅的是 Material 小部件。正因为如此,许多材质库小部件都要求它们上方的树中有一个 Material 小部件。 要引入 Material 小部件,您可以直接包含一个,或使用包含 Material 本身的小部件,例如 CardDialogDrawer ,或Scaffold

我猜你正在尝试在 CupertinoPageScaffoldCupertinoTabView 中使用 ListTile(这是一个 Material 小部件),这显然是 Cupertino 小部件。我就是这样解决的:

Material(
    type: MaterialType.transparency,
    child: ListTile(
        ...
    )
)

【讨论】:

  • 感谢@Ken Tan 抽出宝贵时间并解释得很好。
  • 提到的 Drawer 不鼓励指的是面板、弹出框、侧边栏和拆分视图,所有这些都在 macOS 应用程序的 UI 上进行了演示,但我的直接问题是 iOS 怎么样?我怀疑普通的 iOS 应用是否有足够的屏幕空间。
  • @Kaspi iOS 设计指南与 macOS 几乎相同,但是我看到越来越多的 iOS 应用程序使用第三方抽屉式 UI。我认为从事跨平台应用程序的开发人员正在逐渐放弃 iOS 指南,转而使用 Material。
猜你喜欢
  • 1970-01-01
  • 2019-07-25
  • 2021-04-04
  • 2019-08-01
  • 1970-01-01
  • 2020-07-23
  • 2021-10-03
  • 2019-08-23
  • 1970-01-01
相关资源
最近更新 更多