首页 > 解决方案 > 我想将下面的代码转换成 Cupertino,IOS 风格。但我不能使用 IOS 风格的抽屉菜单。为什么?我该如何使用?

问题描述

我想做android和IOS风格。

我想将下面的代码转换成 Cupertino,IOS 风格。

但我不能使用 IOS 风格的抽屉菜单。为什么?我该如何使用?

return Scaffold(
    key: _scaffoldKey,
    drawer: Drawer(),
    appBar: AppBar(
      leading: IconButton(
        onPressed: () {
          Navigator.pop(context);
        },
        icon: Icon(
          Icons.arrow_back_ios,
          color: MyColors.blue,
        ),
      ),
      centerTitle: true,
      title: Text('Test', style: MyTextStyles.appBarTitle(deviceType) ),
      actions: <Widget>[
        Builder(
          builder: (BuildContext context) => PlatformIconButton(
            onPressed: () {
              Scaffold.of(context).openDrawer();
            },
            icon: Icon(
              Icons.menu,
            )))])
    body: .........

标签: iosflutterflutter-layoutflutter-dependenciesflutter-cupertino

解决方案


Drawer小部件是 Material-exclusive 小部件,您不能直接在 iOS 上使用它。

您可以通过复制小部件的构建构造来为 iOS 构建自己的“类似抽屉”的小Drawer部件,但我不建议这样做,因为抽屉没有 iOS 的“外观和感觉”。作为一个 iOS 用户,我知道一些非常有影响力的应用程序,比如 Twitter,有一些看起来像抽屉的东西,但我认为这不是原生 iOS 应用程序处理这种导航的方式。

相反,您可以做的是Drawer为 Android 提供一个小部件,为 iOS 提供一个底部标签栏,这是一个在 iOS 风格的应用程序中更为常见的组件。您可以使用Platform该类来检查您的代码是在 Android 还是 iOS 上执行,并据此选择正确的小部件。

这是您可能会发现有用的构建逻辑的一个示例。很抱歉我不能直接粘贴代码,我从我制作的演示文稿中截取了这张截图,我不记得我把这个项目的代码放在哪里了,但我希望你觉得它有用。在此处输入图像描述


推荐阅读