前因:最近在过一遍《Flutter组件详解与实战》,一开始主要是在main里面练习的,但是到了第三章就开始觉得一个页面代码有点多而且可读性不强,于是打算弄成一个列表一个章节,点击进去是另外一个dart页面,该页面就是专门来练习章节的代码,如下图
于是简单实现了一下路由跳转和排列(这里的都挺入门的,主要现阶段我想要的功能就是一个简单的列表,展示我要学习的组件,点进去就是该组件的页面,然后我在该页面大致学习了解该组件的一些功能和属性),下面就是实现这样一个东西了
需要创建的文件大致目录如下图所示
从main.dart开始说起,这里main需要引入路由文件index.dart和 MyHomePage.dart,MyHomePage作为MaterialApp的home传进去,使其成为应用程序显示的第一个页面。
main.dart文件 和 index.dart路由文件 关系如下图
MyHomePage.dart文件主要就是展示列表,而该列表的主要JSON信息我是单独写在另外一个文件searchList.dart进行管理的【PS:MyHomePage.dart文件写的时候改了好几版,后续会在其他文章详细写一下过程,这里就只展示最终代码自己写得几个里面算比较好的版本】
MyHomePage.dart文件和searchList.dart列表信息
List里面相应的就不贴出来了,这里主要是记录一下简易的一些配置,List里面的其实和MyHomePage.dart文件写得大同小异,这里大致截图一下就算了,就是一个简单的页面
感觉Flutter的组件要大致过一遍,不用所有属性都须知(因为vscode有提示),但是组件大致有哪些,拿来干嘛的都大致知道一下才行。