Flutter开发HarmonyOS鸿蒙Next应用的时候如何实现导航模态弹出效果

发布于 1周前 作者 gougou168 最后一次编辑是 5天前 来自 Flutter

Flutter开发HarmonyOS鸿蒙Next应用的时候如何实现导航模态弹出效果
【任务描述】 当MaterialPageRoute的fullscreenDialog 设置为true的时候，在安卓和iOS上面是模态弹出效果，但是在鸿蒙上还是从右向左push，这个可以做到和iOS上面一样的模态弹出效果吗？

Harmonyos Next教程
5 回复

同一套代码 鸿蒙和iOS 安卓效果不一致，不符合UI的要求

伙伴你好，能否详细描述一下您的问题？可提供最小化demo到ir单中跟踪处理这个问题 https://issuereporter.developer.huawei.com/

这个单子提交需要选择项目， 我们公司项目不在我的账号下 无法选择， 我已把demo 上传到： 码云Demo，预览效果如下：输入图片说明 导航push 问题， 附带iOS效果区别，安卓类似 虽然不是从下往上 安卓也是中间弹出， 返回icon是X，但在鸿蒙上该属性设置没有效果区别，不符合UI设计，希望能做到两种push 模式的区分 弹出动画和返回按钮是X 都是必须的

代码主要区别如下：

            final route = MaterialPageRoute(
                  builder: (context) {
                    return const HomePage();
                  },
                    //主要是该属性值的变更  false 和true的效果如上图
                  fullscreenDialog: true,
                );
                Navigator.of(context).push(route);

我问了下我们其他同事已经提过了，工单链接

在Flutter开发HarmonyOS鸿蒙Next应用时，实现导航模态弹出效果可以通过使用Navigator组件及其相关方法来完成。以下是一个基本步骤说明：

  1. 定义路由：首先，在应用的路由配置中定义模态弹出页面。这通常是在MaterialApp或自定义的导航器中通过routes参数来完成的。

  2. 触发导航：在需要显示模态弹出效果的地方，调用Navigator.push方法。该方法接受一个BuildContext和一个Route对象，Route对象通常是通过MaterialPageRoute等类来构建的。

  3. 返回结果：如果需要从模态页面中获取数据，可以使用Navigator.pop方法并传递数据作为返回值。在调用Navigator.push的地方，可以通过await关键字接收这个返回值。

  4. 动画效果：Flutter的Navigator默认提供了页面切换的动画效果。如果需要自定义动画，可以创建自定义的Route类，并在其中覆盖buildTransitions方法。

  5. 模态屏障：为确保模态弹出效果，可以在自定义Route中设置屏障层，阻止用户与背景页面的交互。

如果遵循以上步骤仍无法实现预期的导航模态弹出效果，请检查代码逻辑和Flutter版本兼容性。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部