[英]how to enable scrolling when ListView widget reach at top in flutter
To explain what I want I have created a simple demo file为了解释我想要什么,我创建了一个简单的演示文件
Here I have 4 container,这里我有 4 个容器,
What I want is, when I scroll up,all three container( RED, GREEN and listview) should be scrolled up and when listview reach at top (below welcome container) its scrolling should be start...我想要的是,当我向上滚动时,所有三个容器(红色、绿色和列表视图)都应该向上滚动,当列表视图到达顶部(欢迎容器下方)时,它的滚动应该开始......
class HomeScreen extends StatelessWidget {
HomeScreen({Key? key}) : super(key: key);
List<String> mydata = [];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
//this welcome container should be fixed at top
Container(height: 50, child: Center(child: Text('Welcome'))),
Container(
height: 100,
color: Colors.red,
),
Container(
height: 200,
color: Colors.green,
),
Expanded(
child: ListView.builder(
itemCount: mydata.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(mydata[index]),
leading: CircleAvatar(),
);
}))
],
),
),
);
}
}
You can increase the itemCount
by two.您可以将
itemCount
增加 2。
body: SafeArea(
child: Column(
children: [
Container(height: 50, child: Center(child: Text('Welcome'))),
Expanded(
child: ListView.builder(
itemCount: mydata.length + 2,
itemBuilder: (context, index) {
if (index == 0) {
return Container(
height: 100,
color: Colors.red,
);
}
if (index == 1) { // you can just merge it with if like `index<2`, then use condition
return Container(
height: 200,
color: Colors.green,
);
}
return ListTile(
title: Text(mydata[index - 2]),
leading: CircleAvatar(),
);
}))
],
),
),
Also I will suggest you to check CustomScrolView
.另外我会建议你检查
CustomScrolView
。
In order to enable scrolling when the ListView widget reaches the top, and have the other containers scroll with it, you can wrap the entire column in a SingleChildScrollView widget.为了在 ListView 小部件到达顶部时启用滚动,并让其他容器随之滚动,您可以将整个列包装在 SingleChildScrollView 小部件中。 The SingleChildScrollView allows you to scroll the entire column, including the welcome container, the red container, the green container, and the ListView.
SingleChildScrollView 允许您滚动整个列,包括欢迎容器、红色容器、绿色容器和 ListView。
Here is an example of how you can modify your code to enable scrolling when the ListView widget reaches the top:下面是一个示例,说明如何修改代码以在 ListView 小部件到达顶部时启用滚动:
return Scaffold(
body: SafeArea(
child:SingleChildScrollView(
child: Column(children: [
//this welcome container should be fixed at top
Container(
height: 50,
child: Center(child: Text('Welcome'))),
Container(
height: 100,
color: Colors.red,
),
Container(
height: 200,
color: Colors.green,
),
Expanded(child: ListView.builder(
itemCount: mydata.length,
itemBuilder: (context,index){
return ListTile(
title: Text(mydata[index]),
leading: CircleAvatar(),
);
}))
],),
),
),
);
By wrapping the column in a SingleChildScrollView, when you scroll up, all three container (RED, GREEN, and ListView) will be scrolled up and when the ListView reaches the top (below the welcome container), its scrolling will start.通过将列包装在 SingleChildScrollView 中,当您向上滚动时,所有三个容器(RED、GREEN 和 ListView)都将向上滚动,当 ListView 到达顶部(欢迎容器下方)时,它的滚动将开始。
Alternatively, you can use the ListView widget and set the physics property to NeverScrollableScrollPhysics to prevent the ListView from scrolling.或者,您可以使用 ListView 小部件并将 physics 属性设置为 NeverScrollableScrollPhysics 以防止 ListView 滚动。
Expanded(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: mydata.length,
itemBuilder: (context,index){
return ListTile(
title: Text(mydata[index]),
leading: CircleAvatar(),
);
}
)
)
This approach will allow the parent Scrollview to scroll up, and when the ListView reaches the top, the Welcome container will be seen.这种方法将允许父 Scrollview 向上滚动,当 ListView 到达顶部时,将看到 Welcome 容器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.