20.3.18 三
豆瓣列表实现
网络请求JSON转Model
ListView.builder创建LiveView
itemBuilder: (ctx, index) {} 类型可以省略
网络请求的封装, 封装精细点, 每个对应的页面发送网络请求
直接在页面里面使用工具类?
每个里面都封装一个模块
好处: 在模块里面完成转化过程, 更加面向对象
home_request.dart 首页的请求都在这个文件里面封装
config.dart里面放请求HOST地址
请求了多次
构建URL
发送网络请求获取结果 await 配合 async使用
subjects数组存储请求结果
JS里面直接用subjects数组了
面向对象的开发, 转成模型对象将Map数据转成Model
手动进行转化, 看需要的参数, 属性定义模型
优点: 完全可以控, 获取自己需要的, 继承关系一目了然
缺点: 麻烦, 可能出错
暂时使用手动转换
报错dynamic转化
电影No.1排序, rank 加上的字段
快捷键: 直接生成ToString方法 cmd + n
ListTile换成自定义的Widget
信息特别多封装成Widget movieItem.dart
只有在首页使用, 把封装好的widget放在home文件夹中
在另外的界面也会用到, 封装到widgets文件夹里面
状态不会变化, 数据展示是静态的数据, => StatelessWidget
只是在首页中使用, 命名 JHHomeMovieItem
封装分析
Widget树结构
先包裹一个Container, 设置背景颜色方便, 设置内边距方便, 扩展性更强
垂直排布 => Column
Container
Container
Row
Container
Widget -> 渲染时是RenderWidget 性能好
xib存在的问题该需求, 嵌套, 布局改起来麻烦
各有利弊
Flutter写熟练之后, 写布局是更简单的
Auto Layout手写起来更难
CSS写布局最好写, 布局和结构完全分离
Flutter布局和结构写在一起
前端朝着声明式发展
await请求出错抛出异常catch中拿到异常
目前没有比较好用的JSON解析库
调试先用占位的Text()
简单的优化
交叉轴对齐方式设置
padding做间距
底部间距 Container加边框
decoration
写很多布局, 代码量多, 嵌套层级深 => 函数封装
头部的布局 buildHeader()
文本边缘有内边距
有背景颜色, 有圆角 color和decoration不能共存
BoxDecoration(
color: Colors.fromARGB
borderRadius:
)内容的布局
buildContent()
水平排布Row
确定的宽度, 中间适应宽度 => Expanded来做
东西有点多, 再划分一下
2.1内容图片
Widget buildContentImage()
图片默认按照比例显示
给图片圆角 => 很多种方式设置圆角, 比较简单的 => ClipR(Radius)Rect
忘记了多去看源码多去查文档, 学习方法
2.2内容信息
Widget buildContentInfo() {}
Row默认交叉轴垂直对齐 => 顶部对齐
嵌套多, 结果清晰 => 代码划分
buildContentInfoTitle()
playDate, json转模型, 自己看数据
Row之后的小问题, 不能换行, 只能在一行显示
解决办法 => 换成Text.rich
buildContentInfoRate()
Column交叉轴居中对齐 => 改对齐方式成start
SizedBox(width: 6)横向间距
buildContentInfoDesc()
- 是一段文本, 字符串拼接 空格分隔
join自己查源码
超出边界, 要显示两行
报错原因, 整个东西是个Row, 没有固定宽度
没有宽度的情况下是内容的宽度
Expanded包裹Column
2.3内容的虚线
buildContentLine()包裹一个Container, 给个固定的高度
child: JHDashedLine
传好方向
2.4内容的想看
buildContentWish()
- 底部的布局
buildFooter()
背景颜色里面有个文本
Container
上拉下拉监听滚动
toList转换
item默认自适应高度
动态控制item里面的widget的显示与隐藏
if判断, 添加
json转模型官方
一个网站转换, 自动生成.dart文件
复杂的数据结构会漏掉一下东西, 没有导演这个类
单独找到, 单独转换
编辑器插件AS FlutterJsonBeanFactory
也有问题 int 1; int 2;
没有网页好用
