Flutter Clean Architecture 实践(3)

OldBird

实用Tips|2024-11-23|最后更新: 2024-12-19|
type
status
date
slug
summary
tags
category
icon
password
 
notion image
在上一篇文章中,我们设计了 Instagram 应用的凭据页面,通过这一步,我们学习了如何通过在单独的目录中创建自定义小部件来保持 UI 代码的整洁。同时,我们还修改了 Android 设置,以防止一些构建异常。
 
<ins/>
 
lib > presentation > pages > main_screen 目录下创建一个名为 main_screen.dart 的文件。

main_screen.dart

通过这个实现,我们的 Instagram 主界面就完成了。在底部导航栏中可以看到所有页面都已经连接起来。
notion image

接下来在页面目录下创建以下命名的文件夹:
  • Home
  • Search
  • Post
  • Activity
  • Profile
然后在每个文件夹中创建对应的 .dart 文件。

home_page.dart


<ins/>

search_page.dart


upload_post_page.dart


activity_page.dart


profile_page.dart


这部分代码涵盖了 Instagram 克隆应用的所有页面,构建了一个基本的应用框架,使用了底部导航栏和不同的页面内容。所有页面都保持了 UI 结构的简洁和一致性。
 
Loading...