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

发布于 1周前 作者 gougou168 来自 Flutter

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

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

  • MaterialApp
    • Scaffold
      • Appbar
      • Body
      • Drawer

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

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


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

更多关于flutter 初学者的疑问,如何使用Flutter组织页面和代码的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

7 回复

我是把 appbar 这些做组件了,每个都是单独的 scaffold

仔细想想,其实能复用的页面也没有几个

更多关于flutter 初学者的疑问,如何使用Flutter组织页面和代码的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


一个文件一把梭,哈哈,

你的感觉是对的。

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

所以还要自己组织。找路由组件啥的自己写吧。

如果要快,可以参考这个 https://juejin.cn/post/6924104248275763208 ,然后 getx 一把梭。

初学者可以用别人铺垫好的窝子: https://www.v2ex.com/t/989611

flutter 的思想都是学 react 的, 至于 react ,有很多商业的开源组件库 ,类似 ant design ,material design 等等,可以去前端汲取一点灵感。而且 drawer 和 appbar 公用其实和组件复用并没有冲突啊,你要做的就是要么 做 provider ->提取组件内的状态,或者做 hooks 给其他组件用。

对于Flutter初学者的疑问,关于如何使用Flutter组织页面和代码,以下是一些专业建议:

首先,Flutter使用一种称为“Widget”的组件模型来构建用户界面,Widgets是构建UI元素的基本构建块。因此,组织页面时,你需要考虑如何有效地使用这些Widgets来布局你的UI。

其次,代码组织方面,Flutter项目通常遵循一定的目录结构。你可以在lib目录下创建不同的Dart文件来定义你的页面和组件。每个Dart文件通常包含一个Widget类,该类定义了页面的布局和样式。

为了管理页面之间的导航,你可以在中央路由文件中定义所有的页面路由。这个文件通常命名为routes.dart或者在main.dart文件中直接定义。使用Navigator和一个路由映射来注册和导航到不同的页面。

此外,对于状态管理,Flutter提供了多种方式,如setState、Provider、Bloc等。你可以根据项目的复杂性和需求来选择合适的状态管理方式。

最后,遵循Flutter的编码规范也是非常重要的。良好的编码规范可以提高代码的可读性和可维护性。建议遵循Dart语言的命名规范、缩进格式规范、注释规范等。

总之,通过合理使用Widgets、组织代码结构、管理页面导航和状态,以及遵循编码规范,你可以有效地使用Flutter来构建你的应用程序。

回到顶部