Flutter Material 到 Cupertino 的转换问题

Question

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

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

1. TextFormField: I am not able to find TextFormField in Cupertino design to use with forms...
2. Validator: How to valide CupertinoTextField as there is no validator method
3. App Drawer: Right now I have App Drawer. As I am moving to Cuprtino UI design for both IOS and Android should I drop the App Drawer?
4. How can I give the width of the CupertinoButton ?
5. ListTitle is throwing exception when I am trying to migrate to Cuprtio. The exception is "The specific widget that could not find a Material ancestor was: ListTitle"

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

感谢您的宝贵时间

Answer 1

1. TextFormField: I am not able to find TextFormField in Cupertino design to use with forms...
2. Validator: How to valide CupertinoTextField as there is no validator method

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

3. App Drawer: Right now I have App Drawer. As I am moving to Cuprtino UI design for both IOS and Android should I drop the App Drawer?

再次，Drawer小部件仅存在于 Material Design 中。您可能在市场上的各种 iOS 应用程序中看到的所有抽屉都是定制的 UIView由第 3 方提供商制作。 Apple Human Interface Guidelines明确指出:

Avoid using drawers. Drawers are seldom used in modern apps and their use is discouraged. Panels, popovers, sidebars, and split views are preferred for displaying supplementary window content.

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

4. How can I give the width of the 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 .您可以引用 SizedBox 的 API 文档和 FractionallySizedBox

5. ListTitle is throwing exception when I am trying to migrate to Cuprtio. The exception is "The specific widget that could not find a Material ancestor was: ListTitle"

正如错误日志所说:

In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's material library, that material is represented by the Material Widget. It is the Material widget that renders ink splashes, for instance. Because of this, many material library widgets require that there be a Material widget in the tree above them. To introduce a Material widget, you can either directly include one, or use a widget that contains Material itself, such as a Card, Dialog, Drawer, or Scaffold.

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

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