flutter学习笔记—滚动-flutter-xue-xi-bi-ji-scrollable-shen-ru-xiang-jie-listview-zu-jian

---

title: flutter学习笔记—滚动
date: 2023-01-23 20:00:39.995
updated: 2023-01-26 13:26:06.064
url: https://hexo.start237.top/archives/flutter-xue-xi-bi-ji-scrollable-shen-ru-xiang-jie-listview-zu-jian
categories:

• IT技术
  tags:
• flutter

---

滚动列表与动态加载

相关链接

ListView

可以创建一个滚动视图

属性

属性	类型	说明
itemBuilder	Function	动态渲染
itemCount	int	限制列表的条目数
cacheExtent	int	缓冲区高度

使用方法ListView.build时的列表算法

看不见的条目即不需要渲染。顶部超过的条件删除，底部提前缓存10条数据。

方法

名称	说明
build	高效渲染一个列表
separate	可渲染带分割线的列表

深入详解ListView组件

相关链接

ListView.builder(
	itemBuilder:(context,index){
    	return Container(
        	height:50,
            	width:50,
            	color:index % 2 == 0 ? Colors.blue : Colors.blue[200],
        )
    },
    scrollDirection:Axis.vertical, // 列表方向 
    itemCount:200,
    itemExtent:60 ,//强制限制每个item元素的高度or宽度。
    controller: _controller,
    physics: BouncingScrollPhysics() //物理属性，BouncingScrollPhysics()值是模拟IOS的到底或顶反弹效果，ClampingScrollPhysics() 摸拟安卓上的无效果。还有更多的值，可以查阅资料。
)

列表加滚动条的需要在父元素上使用 Scrollbar的组件

Scrollbar(
	children:ListView()
)

ScrollController 这是列表滚动控制器

scrollController.animateTo() // 以动画的方式跳转
scrollController.offset //当前滚动条所处的位置

下拉刷新与通知事件

相关视频链接

IOS风格列表的滚动条 wigdet

CupertionScrollbar(
	child:ListView()
)

Scrollbar 的属性

Scrollbar(
	isAlwaysShow:true, // 滚动条一直显示
    	controller: //传入和ListView一样的控制器
)

RefreshIndicator 这个组件可以做下拉刷新的功能

RefreshIndicator(
	onRefresh:(){
    		return Future.delayed(Duration(seconds:2)); //等待2s刷新，这里可以做一些异步数据的请求操作。
        },
	child:ListView()
)

NotificationListener 监听子级事件，可用于拦截事件冒泡

NotificationListener(
	onNotification:( ScrollNotification _event){
    	print(_envent)
        
        return true; // 如果是true则截获事件，如果是false则让事件继续向上冒泡
    
    },
    child:ListView(),

)

支持滑动删除的Dismissible

笔记详解
相关视频

const Dismissible({
    @required Key key,
    @required this.child,
    this.background,            // 滑动背景展示 Widget
    this.secondaryBackground,   // 与background相反滑动背景展示 Widget
    this.confirmDismiss,        // 是否确定清除当前 Widget
    this.onResize,              // 重新修改尺寸回调
    this.onDismissed,           // 确定清除回调
    this.direction = DismissDirection.horizontal,   // 滑动关闭方向
    this.resizeDuration = const Duration(milliseconds: 300),       // 修改尺寸时长
    this.dismissThresholds = const <DismissDirection, double>{},  // 各方向滑动清除阀值
    this.movementDuration = const Duration(milliseconds: 200),    // 清除过程时长
    this.crossAxisEndOffset = 0.0,
    this.dragStartBehavior = DragStartBehavior.start,
})

GridView网格部局

GridView.builder(
	itemCount:200,
    	gridDelegate:  // 值见下方


)

gridDelegate各种值

SliverGridDelegateWithFixedCrossAxisCount(
	crossAxisCount:4, // 交叉轴填放4个格
    	childAspectRatio:16/9, // 创建带比例的网格
)

当在横屏模式下，或着在平板下，元素也会被放大，这样是不太友好的。需要用到下面的属性。会用到另一个值

SliverGridDelegateWithMaxCrossAxisExtent(
	maxCrossAxisExtent:100, // 最大尺寸
    childAspectRatio:16/9, // 创建带比例的网格
)

GridView 提供了方法

GridView.extent(
	maxCrossAxisExtent:104, // 最大尺寸
    children:[
    ],
    childAspectRatio:3/2, //风格的比例
)

这个方法不支持build方法。

GridView.count(
	maxCrossAxisExtent:104, // 最大尺寸
    childAspectRatio:3/2, //风格的比例
    mainAxisSpacing:2.0, //主轴间隙
    crossAxisSpacing:4.0, // 交叉轴间隙
)

总结

1. GridView 是用来渲染网格的wigdet

2. 方法有

名称	作用
build	可以懒加载渲染网格
count	一个语法糖，渲染指定数量的风格
extend	用最大尺寸来限制网格数据，可以做响应式的网格

3.常用属性有

名称	类型	作用
gridDelegate	SliverGridDelegate	一个在GridView中控制子元素布局的委托
crossAxisCount	int	网格的数量
maxCrossAxisExtent	int	网格的最大尺寸
childAspectRatio	double	网格比例
mainAxisSpacing	double	主轴网格间隙
crossAxisSpacing	double	交叉轴间隙

4. gridDelegate 的几种值，里面的属性同GridView的属性

• SliverGridDelegateWithFixedCrossAxisCount
• SliverGridDelegateWithMaxCrossAxisExtent

再来4个widget!

ListWheelScrollView

创建一个3D转轮的效果

属性

名称	类型	作用
diameterRatio	double	直径
overAndUnderCenterOpacity	double	除去中间item的透明度
itemExtent	double	限制item尺寸
offAxisFraction	double	距离轴心距离
magnification	double	放大镜效果
physics		物理效果 值 FixedExtentScrollPhysics() 保证item正好停留在中间
onSelectedItemChange	Function	列表滚动时正好选择的index，一个回调方法

PageView

类似于轮播图的一种效果。翻动整个页面

属性

名称	类型	作用
pageSnapping	bool	页面是否翻滚整屏
scrollDirection	Axis	页面滚动方向

ReorderableListView 拖拽item组件

属性

名称	类型	作用
children	[]Wigdet
onReorder	Function	拖动时的事件，回调里面会有一个，拖动的index和一个目标index
header	Wigdet	列表头部不可动的一个小部件

SingleChildScrollView

使用Column的部件时，子组件有会出现溢出的现象，因为Column是固定的。SingleChildScrollView会在合适的时候出现滚动条。如果使用ListView，就是一个滚动列表的容器，从设计上来说是不适合使用这个组件的。