20.3.11 三

点击按钮, Icon变成红色
StatelessWidget -> StatefulWidget
变量做记录, 真实开发中用模型来记录防止影响其他数据
setState() {

}
让界面刷新
能用StatelessWidget尽量使用StatelessWidget

滚动的Widget

1. ListView 列表
2. GridView 网格, 九宫格
3. sliver 分片 本质上是Sliver
4. 滚动的监听

先不讲JSON的解析

ListView组件

• 默认构造方法: ListView() children比较少的时候使用, 一次创建
• ListView.builder() 即将展示的时候创建
• ListView.separated()
• ListView.custom() 需要传入代理

List.generate(100, generator()) List的构造函数
Flutter提供的 ListTile
总高度超过界面高度, 自动滚动
Flutter实现滚动, 需要包裹ListView
水平滚动需要确定Item宽度 itemExtent 范围(高度/宽度)
reverse: true, 反转

ListView.builder()
itemBuilder: () {
}

ListView.separated()
separatorBuilder: () {}
Divider 分割线
一般传入回调函数的时候, 都是等到需要的时候自动调用回调函数

GridView

• GridView()
• GridView.count()
• GridView.extent()
• GridView.builder()

gridDelegate: ,必传参数
SliverGridDelegateWithFixedCrossAxisCount
固定的个数, 宽度根据不同的屏幕改变
Random().nextInt(256) 随机数
高度怎么确定?
childAspectRatio: ,宽高比
crossAxisSpacing: 8, 交叉轴间距
mainAxisSpacing: 8, 主轴间距
两边缘间距, 包裹一个Padding
padding: EdgeInsets.symmetric(horizontal:8)

传入宽度, 不同的屏幕放的个数不同,
SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100, 最大宽度, 414 100放5个

)
Item

count()

sliver

学习方法
ListView, GridView -> buildSliver抽象方法, 子类实现
extends BoxScrollView 不是Widget就是一个普通的类
extends ScrollView
extends
看build方法 返回了一个Scrollable
继承关系理清楚
本质是sliver

CustomScrollView()
slivers
dart/math包 随机数
安全区域 刘海SafeArea包裹
Sliver的安全区域 SliverSafeArea() 默认情况安全区域内显示, 可以滚动到刘海

内边距出现了覆盖, 不想要这个效果
不用Padding -> SliverPadding
SliverAppBar

滚动的监听

两种方式可以监听:
controller:
1. 可以设置默认值offset
2. 监听滚动, 也可以监听滚动的位置
NotificationListener
1. 开始滚动和结束滚动
ScrollController

作业:
Body的Widget抽取了, 监听的东西