20.3.16 一
豆瓣电影列表界面
- 对前面内容的回顾
- 对一些Widget, 其他知识点补充
- 代码的结构如何进行组织
异步compute函数执行报错
原因: compute接收的回调函数要是全局的, 不是对象的方法
没有对象, 不能执行对象方法
启动文件main.dart配置
Edit Config...
豆瓣两个难点, 先做封装
- 评分五颗星显示
- Flutter边框不支持虚线
抽成独立的组件, 以后也可以复用
1. 评分Widget的封装
具备通用性的特点
评分控制星数
星的颜色
星的大小
状态有可能发生变化, 用StatefulWidget
如何封装的呢?
绝对定位
Stack, 元素可以重叠
搞2个Widget横向重叠 => Row
按比例裁剪
需要传过来的参数
分数(必传) rating
满分(可以给默认值) maxRating
展示多少个星(可默认) count
星的大小(可默认) size
未选中颜色(可默认) unselectedColor
选中颜色 selectedColor
颜色16进制 Color(0xffbbbbbb)
默认值const
List.generate(widget.count, )
buildUnselectedStar()
创建stars
构建满填充的star
满的星
向下取整 floor
向上取整 ceiling构建部分填充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
重启重新打包时会重新打包资源
代码抽取
抽成一个函数
Widget buildBottomItem() {}抽成一个类
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
