8

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

当我试图从 Material design 迁移到 Cupertino UI 时，我面临着很多问题，尤其是在以下领域。

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

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

谢谢你的时间

4

1 回答 1

17
  1. TextFormField：我无法在 Cupertino 设计中找到与表单一起使用的TextFormField ...
  2. 验证器：如何验证CupertinoTextField，因为没有验证器方法

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

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

同样，Drawer小部件仅存在于 Material design 中。您可能在市场上的各种 iOS 应用程序中看到的所有抽屉都是UIView由第三方提供商定制的。Apple 人机界面指南明确指出：

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

您可能需要考虑使用CupertinoPageScaffoldor CupertinoTabScaffold，具体取决于您的设计要求。

  1. 如何给出 CupertinoButton 的宽度？

你可以CupertinoButton用Container,SizedBox或包裹你的FractionallySizedBox。

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小部件中（例如ListView, Column），您可能需要使用SizedBoxor FractionallySizedBox。您可以参考 API 文档SizedBox和FractionallySizedBox

  1. 当我尝试迁移到 Cuprtio 时，ListTitle 抛出异常。例外是“找不到 Material 祖先的特定小部件是：ListTitle”

正如错误日志所说：

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

我猜您正在尝试在 a or中使用ListTile（这是一个 Material 小部件），这显然是 Cupertino 小部件。这就是我解决它的方法：CupertinoPageScaffoldCupertinoTabView

Material(
    type: MaterialType.transparency,
    child: ListTile(
        ...
    )
)
于 2019-04-03T06:25:57.010 回答