Question

我正在完成一个几乎完成80％的项目。我所有的项目都是在Material design上完成的。现在，我正在尝试将Cupertino UI主题同时转移到Android和IOS。

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

TextFormField ：我无法在Cupertino设计中找到要用于表单的 TextFormField ...

验证器：由于没有验证器方法，如何验证 CupertinoTextField
应用程序抽屉：现在我有应用程序抽屉。在我迁移到针对iOS和Android的Cuprtino UI设计时，我应该放弃App Drawer吗？

如何确定CupertinoButton的宽度？

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

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

感谢您的时间

Answer 1

TextFormField ：我无法在Cupertino设计中找到要用于表单的 TextFormField ...

验证器：由于没有验证器方法，如何验证 CupertinoTextField

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

应用程序抽屉：现在我有应用程序抽屉。在我迁移到针对iOS和Android的Cuprtino UI设计时，我应该放弃App Drawer吗？

同样，onPressed小部件仅存在于Material design中。您在市场上各种iOS应用中可能会看到的所有抽屉都是由第三方提供商定制的Drawer。 Apple Human Interface Guidelines明确指出：

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

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

如何确定CupertinoButton的宽度？

您可以用CupertinoTabScaffold，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。您可以参考SizedBox和FractionallySizedBox的API文档

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

如错误日志所述：

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

我猜您正在尝试在Scaffold或ListTile中使用CupertinoPageScaffold（它是Material部件），这显然是Cupertino部件。这是我解决的方法：

CupertinoTabView

Flutter Material向Cupertino转型的问题

1 个答案: