Flutter项目实战(一)
在前面的《Flutter中文教程(一)》中,在第九章的内容中,针对一个购物车应用来讲解了Flutter的导航。活学活用,咱们也做一个类似的书城热搜榜应用。
项目实现的功能:显示十本书籍的相关信息,点击可跳转到详情界面。
先上效果图,如下图:
主界面:
详细界面:
为了达到上面的效果,咱们一步一步地来。观察主界面,每一本书籍,可以分为两个大部分
- 左边
- 带有圆角的图像
- 右边(依次向下)
- 书名
- 书籍描述
- 热度
- 左边一个图标
- 右边热度数据
根据上面的描述,读者们应该能过想到该如何安排使用Row和Column了。
下面我们来具体实现,在此之前,一些必要的工作还是需要完成的。
必要的准备工作
本文使用来十本书籍的图片,所以读者们需要自己下载十张图片。在Flutter的项目文件夹下创建一个img文件夹用来存放你刚刚下载的图片。
接下来在你的项目的根目录下的pubspec.yaml中添加assets(默认的pubspec.yaml文件中有一段默认的被注释掉的assets的配置,读者们在那儿取消注释,并写上自己图片的目录即可)
1 | assets: |
完成了上述的工作,我们就可以来动工了。
BookInfo
BookInfo是一个自己定义的类,具体如下:
1 | class BookInfo { |
此处的数据是直接内置在类当中,随着后面的深入学习,我们可以用别的方法来添加数据。
BookBox
BookBox是一个用来显示书籍信息的widget。具体代码如下:
1 | import 'package:flutter/material.dart'; |
需要注意的是,代码最开始导入的包,是笔者将不同的部分放在了不同的文件中,来避免把代码放在单一的main.dart导致的冗余和杂乱。
笔者的项目结构如下:
其余的地方,并没有太大的差别。
BookPage
BookPage是点击一个书籍信息后跳转到的详细界面。具体的代码如下:
1 | import 'package:flutter/material.dart'; |
到这儿,一个简单的书籍热搜榜的项目,就到此完成。随着后面的深入学习,我们在继续对项目进行优化。
版权声明:转载请注明出处!
文章说明: 文章如有不足或者纰漏之处,欢迎留言斧正!