techstay
V2EX  ›  Flutter

flutter 初学者的疑问,如何组织页面和代码

By techstay at 2023 年 10 月 25 日 · 2221 次点击

最近开始学习 flutter ,对着官方文档看了一段时间,感觉需要练习一下。官方的例子也不少,所以我想着如果把他们整合到一起应该也不错,用 drawer 做个导航,每一个选项就是一个展示页面。

所以界面结构应该是这样的,这样看来似乎只需要将 body 处的组件独立出来就好了。

  • MaterialApp
    • Scaffold
      • Appbar
      • Body
      • Drawer

但是似乎又有些不对,因为提供 route 功能的是 MaterialApp ,所以看起来似乎每一个页面都应该是完整的 scaffold ,包括 appbar 和 drawer 这些。但是 appbar 和 drawer 貌似又是公用的。

所以这时候应该怎么组织才比较合理呢?希望老哥们指点一下。

6 条回复  •  2023-11-08 11:46:32 +08:00
3IOhG7M0knRu5UlC
   1
3IOhG7M0knRu5UlC  
   2023 年 10 月 25 日 via Android
我是把 appbar 这些做组件了,每个都是单独的 scaffold

仔细想想,其实能复用的页面也没有几个
july1995
   2
july1995  
   2023 年 10 月 25 日 via Android
一个文件一把梭,哈哈,
buxudashi
   3
buxudashi  
   2023 年 10 月 25 日
你的感觉是对的。

一般底部 4 个按钮,都要独立出来共用。所以 flutter 的设计本身就没考虑现实。它实现了 1 个页面 4 个切换。而不是 4 个页面。很明显这不合理。

所以还要自己组织。找路由组件啥的自己写吧。
jeepc
   4
jeepc  
   2023 年 10 月 25 日
如果要快,可以参考这个 https://juejin.cn/post/6924104248275763208 ,然后 getx 一把梭。
milukun
   5
milukun  
   2023 年 11 月 8 日
初学者可以用别人铺垫好的窝子: https://www.v2ex.com/t/989611
ZGame
   6
ZGame  
   2023 年 11 月 8 日
flutter 的思想都是学 react 的, 至于 react ,有很多商业的开源组件库 ,类似 ant design ,material design 等等,可以去前端汲取一点灵感。而且 drawer 和 appbar 公用其实和组件复用并没有冲突啊,你要做的就是要么 做 provider ->提取组件内的状态,或者做 hooks 给其他组件用。
© 2026 V2EX · 60ms · 3.9.8.5