Flutter从入门到写出完整App Day7. 豆瓣电影列表上

20.3.16 一

豆瓣电影列表界面

1. 对前面内容的回顾
2. 对一些Widget, 其他知识点补充
3. 代码的结构如何进行组织

异步compute函数执行报错
原因: compute接收的回调函数要是全局的, 不是对象的方法
没有对象, 不能执行对象方法

启动文件main.dart配置
Edit Config...

豆瓣两个难点, 先做封装

1. 评分五颗星显示
2. Flutter边框不支持虚线
   抽成独立的组件, 以后也可以复用

1. 评分Widget的封装

具备通用性的特点
评分控制星数
星的颜色
星的大小

状态有可能发生变化, 用StatefulWidget

如何封装的呢?
绝对定位
Stack, 元素可以重叠
搞2个Widget横向重叠 => Row
按比例裁剪

需要传过来的参数
分数(必传) rating
满分(可以给默认值) maxRating
展示多少个星(可默认) count
星的大小(可默认) size
未选中颜色(可默认) unselectedColor
选中颜色 selectedColor

颜色16进制 Color(0xffbbbbbb)
默认值const

List.generate(widget.count, )
buildUnselectedStar()

1. 创建stars

2. 构建满填充的star
   满的星
   向下取整 floor
   向上取整 ceiling

3. 构建部分填充star
   ClipRect()
   自定义子类
   抽象方法, 子类必须实现
   当成一个矩形裁剪
   getClip()

要不要重新裁剪, 宽度不一致在重新裁剪
shouldReclip()

如果传入图片使用传入图片, 没有传入使用默认图片 ??

完成功能和复用性

创建dart文件用下划线命名
star_rating.dart

虚线的封装

实现目标
提供定制
确定虚线的方向
虚线的宽度
虚线的高度
多少个虚线, 密度
虚线的颜色

只是负责展示的 => StatelessWidget

DashedLine
final Axis axis; 必须传或给个默认值
final double dashWidth;
final double dashHeight;
final int count;
final Color color;

SizeBox来做

用不上的用_替代

默认情况下SizeBox没有color属性
写个child: DecoratedBox
decoration: BoxDecoration(color: color)
)

TabBar实现说明

分析:
home属性直接改不合适
Scaffold: body -> IndexedStack
切换就是一个状态改变 -> StatefulWidget

重启重新打包时会重新打包资源

代码抽取

1. 抽成一个函数
   Widget buildBottomItem() {}

2. 抽成一个类
   items有具体的要求
   class JHBottomBarItem extends BottomNavigationBarItem {

}
创建一个bottom_bar_item.dart文件
文字不见的原因? 超过4个的时候, 有一个属性控制文本隐藏

initialize_items.dart文件
单独的文件里做管理

引用方式
绝对路径 package:
相对路径

home.dart是StatelessWidget
home_content.dart
应该是StatefulWidget

ui文件夹

core文件夹
网络
工具

文本选中时的颜色用的是主题的颜色
ThemeData()

BottomNavigationBar中
选中和未选中的字体大小不一样
main.dart中
unselectedFontSize 默认12
selectedFontSize 默认14
设置成一致

默认水波纹高亮效果
MaterialApp()
highlightColor:Colors.transparent