type
status
date
slug
summary
tags
category
icon
password
在上一篇文章中，我们设计了 Instagram 应用程序的主屏幕，其中包括主页、搜索、帖子、活动和个人资料等页面，我们也设计了所有这些页面，现在是时候继续设计我们在上一篇文章中留下的页面了页面需要导航。
<ins/>
在您的个人资料页面中，您会在 AppBar（） 上找到菜单图标，请查看以下代码：
我们只需用 InkWell（） 包装它，然后在 onTap 中调用我们的方法，即 _openBottomModalSheet（context） 接受参数 context。
现在，在 build（） 方法中实现下面的方法。
<ins/>
在此代码中，如果您注意到在上面的代码中，在 Text（“Edit Profile”） 小部件上，我们执行 Navigator.push（） 将用户导航到 EditProfilePage（）。
在 profile 目录中创建 edit_profile_page.dart。
edit_profile_page.dart
然后在 Profile 目录中创建一个 widgets 目录，并在其中创建一个 Dart 文件并将其命名为 profile_form_widget。
我们的编辑个人资料页面已经结束了。
现在让我们去评论页面。转到presentation > pages > home > home_page.dart 搜索下面的代码。
将此图标与小组件 InkWell（） 或 GestureDectactor（） 包装在一起，两者都提供 onTap 方法，打开 onTap 主体并执行：
但是 CommentPage（） 现在会抛出编译时错误，所以让我们也创建评论页面。
转到 > presentation > pages > post > 并在此目录中创建 comment_page.dart
comment_page.dart
我们也完成了评论页面。
让我们去更新帖子页面。
再次转到 > presentation > pages > home > home_page.dart 并搜索下面的代码。
这是我们单个帖子的第一行，我们将从中控制我们的帖子，例如 delete 或 update。
用 GestureDectator（） 包装它，然后转到 onTap 方法，然后在此处再次调用 _openBottomModalSheet（context），主 bottomModalSheet 的代码将如下所示：
在这里，您将看到 Text(”Update Post”) 小部件，在这里，我们在 GestureDectator() 的 onTap 中调用 Navigator.push()。这将引导我们进入 UpdatePostPage()，它暂时没有创建，所以让我们也创建它。
转到 > presentation > pages > post > 并创建update_post_page
update_post_page.dart
结论
在这部分，我们介绍了 Instagram 应用程序的 UI，在下一篇文章中，我们将介绍 Routing。