ListView（列表）
ListView
- scrollDirection: 控制视图的滚动方向,需要设置width
- itemExtent: 设置滚动方向上每个item宽度
ListView(
children: List.generate(10, (index) {
return ListTile(
leading: Icon(Icons.menu),
trailing: Icon(Icons.delete),
title: Text('海贼·王路飞 $index'),
subtitle: Text('罗罗洛亚 $index'),
);
}),
)
image.png
ListView(
/// 方向，设置横向需要宽度
scrollDirection: Axis.horizontal,
itemExtent: 200,
children: List.generate(2, (index) {
return Container(
//width: 200,
child: ListTile(
leading: Icon(Icons.menu),
trailing: Icon(Icons.delete),
title: Text('海贼·王路飞 $index'),
subtitle: Text('罗罗洛亚 $index'),
),
);
}),
)
image.png
ListView.builder(ListView会在真正需要的时候去创建子Widget，而不是一开始就全部初始化好。)
ListView.builder(
itemCount: 10,
/// 当列表滚动到对应位置的时候，ListView会自动调用该方法来创建对应的子Widget
itemBuilder: (ctx, index){
return Text('海贼·王路飞 $index');
}
)
image.png
ListView.separated(带分割线)
ListView.separated(itemBuilder: (ctx,index){
return Text('hello hello');
}, separatorBuilder: (ctx,index){
return Container(
color: Colors.orange,
child: Divider(
color: Colors.red,//颜色
height: 30,//分割线区域的高度，并非分割线的高度
indent: 50,//起点缩进
endIndent: 20,///终点缩进
thickness: 10,///真·分割线高度
),
);
}, itemCount: 10)
image.png
GridView(多列，网格)
- SliverGridDelegateWithFixedCrossAxisCount
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount{
crossAxisCount: 3,/// 交叉轴item个数
crossAxisSpacing: 10,/// 交叉轴的间距
childAspectRatio: 0.8,/// 子Widget的宽高比
mainAxisSpacing: 20 ///主轴的间距
),
children: List.generate(10, (index) {
return Container(
color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
);
}),
)
image.png
- SliverGridDelegateWithMaxCrossAxisExtent
GridView(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100,/// 交叉轴的item宽度
crossAxisSpacing: 10, /// 交叉轴的间距
childAspectRatio: 0.8, /// 子Widget的宽高比
mainAxisSpacing: 20 /// 主轴的间距
),
children: List.generate(10, (index) {
return Container(
color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
);
}),
)
image.png
- GridView.build(同ListView,提升性能)
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8
),
itemBuilder: (BuildContext ctx, int index) {
return Container(
color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
);
},
itemCount: 100,
)
CustomScrollView(统一管理多个滚动视图)
- SliverList：类似ListView；
- SliverFixedExtentList：类似SliverList，可以设置滚动高度；
- SliverGrid：类似于GridView；
- SliverPadding：设置Sliver的内边距；
- SliverAppBar：添加一个AppBar，通常用来作为CustomScrollView的HeaderView（或者SliverToBoxAdapter）；
- SliverSafeArea：设置内容显示在安全区域
CustomScrollView(
slivers: <Widget>[
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 20,
childAspectRatio: 1.2),
delegate: SliverChildBuilderDelegate((BuildContext ctx, int int) {
return Container(
color: Color.fromARGB(255, Random().nextInt(256),
Random().nextInt(256), Random().nextInt(256)));
}, childCount: 10),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.pink[index*100],
child: Text('海贼·王路飞 $index'),
);
}, childCount: 10),
)
],
)
image.png
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 200,/// 高度
pinned: false,/// 不悬停
flexibleSpace: Container(
color: Colors.orange,
width: 375,
),
)
,
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 20,
childAspectRatio: 1.2),
delegate: SliverChildBuilderDelegate((BuildContext ctx, int int) {
return Container(
color: Color.fromARGB(255, Random().nextInt(256),
Random().nextInt(256), Random().nextInt(256)));
}, childCount: 10),
),
SliverAppBar(
expandedHeight: 300,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text("HeaderView"),
background: Image.asset("assets/images/1.jpg", fit: BoxFit.cover,),
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.pink[(index%10)*100],
child: Text('海贼·王路飞 $index'),
);
}, childCount: 20),
)
],
)
Jul-11-2021 11-03-13.gif
监听滚动事件
ScrollController
- 初始化ScrollController
- ScrollController给到滚动视图
- 添加监听
class _MyAppState extends State<MyApp> {
final _controller = ScrollController();
@override
void initState() {
// TODO: implement initState
super.initState();
_controller.addListener(() {
print(_controller.offset);
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: buildHome(),
);
}
Widget buildHome() {
// final usernameTextEditController = TextEditingController();
return Scaffold(
appBar: AppBar(
title: Text('test'),
),
body: Container(
child: ListView.builder(
controller: _controller,
itemCount: 100,
/// 当列表滚动到对应位置的时候，ListView会自动调用该方法来创建对应的子Widget
itemBuilder: (ctx, index){
return Text('海贼·王路飞 $index');
}
)
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => print("FloatingActionButton"),
),
);
}
}
/// 释放一下
@override
void dispose() {
super.dispose();
_controller.dispose();
}
NotificationListener
NotificationListener(
onNotification: (ScrollNotification noti){
// 判断监听事件的类型
if (noti is ScrollStartNotification) {
print("开始滚动.....");
} else if (noti is ScrollUpdateNotification) {
//当前滚动的位置和总长度
final currentPixel = noti.metrics.pixels;
final totalPixel = noti.metrics.maxScrollExtent;
double progress = currentPixel / totalPixel;
print('progress - $progress');
print("正在滚动：${noti.metrics.pixels} - ${noti.metrics.maxScrollExtent}");
} else if (noti is ScrollEndNotification) {
print("结束滚动....");
}
///返回true以取消通知冒泡。返回false以允许通知继续发送给其他祖先。
return false;
},
child: ListView.builder(
itemCount: 100,
/// 当列表滚动到对应位置的时候，ListView会自动调用该方法来创建对应的子Widget
itemBuilder: (ctx, index){
return Text('海贼·王路飞 $index');
}
),
)
