Flutter Material向Cupertino转型的问题

Question

我正在进行的项目几乎完成了80％。我所有的项目都是在Material design上完成的。现在，我试图将Cupertino UI主题移至Android和IOS。

当我尝试从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引发异常。唯一的例外是“找不到材料祖先的特定小部件为：ListTitle”

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

谢谢你的时间

Answer 1

1. TextFormField：我无法在Cupertino设计中找到要与表单一起使用的TextFormField ...
2. 验证程序：由于没有验证程序方法，如何验证CupertinoTextField

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

3. App Drawer：现在我有App Drawer。当我转向针对iOS和Android的Cuprtino UI设计时，应该放弃App Drawer吗？

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

避免使用抽屉。抽屉很少在现代应用程序中使用，不建议使用它们。面板，弹出窗口，侧边栏和拆分视图是显示辅助窗口内容的首选。

您可能要根据设计要求考虑使用CupertinoPageScaffold或CupertinoTabScaffold。

4. 如何确定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），您可能需要使用SizedBox或FractionallySizedBox。你可以参考的API文档SizedBox和FractionallySizedBox

5. 当我尝试迁移到Cuprtio时，ListTitle引发异常。唯一的例外是“找不到材料祖先的特定小部件为：ListTitle”

如错误日志所述：

在材料设计中，大多数小部件在概念上都“打印”在一块材料上。在Flutter的材质库中，该材质由“材质小部件”表示。例如，“材料”小部件可呈现墨水飞溅。因此，许多物料库窗口小部件要求在它们上方的树中有一个物料小部件。引进材料部件，您可以直接包含一个或使用包含材料本身就是一个小部件，如Card，Dialog，Drawer，或Scaffold。

我猜你正在尝试使用ListTile（这是一个小部件材料）的一个CupertinoPageScaffold或CupertinoTabView，这是明显的库比提诺部件。这是我解决的方法：

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