如何在 ListView 小部件到达顶部时启用滚动 flutter

Question

为了解释我想要什么，我创建了一个简单的演示文件

这里我有 4 个容器，

我想要的是，当我向上滚动时，所有三个容器（红色、绿色和列表视图）都应该向上滚动，当列表视图到达顶部（欢迎容器下方）时，它的滚动应该开始......

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(),
                      );
                    }))
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以将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(),
                );
              }))
    ],
  ),
),

另外我会建议你检查CustomScrolView 。

Answer 2

为了在 ListView 小部件到达顶部时启用滚动，并让其他容器随之滚动，您可以将整个列包装在 SingleChildScrollView 小部件中。 SingleChildScrollView 允许您滚动整个列，包括欢迎容器、红色容器、绿色容器和 ListView。

下面是一个示例，说明如何修改代码以在 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(),
            );

          }))
        ],),
      ),
    ),
);

通过将列包装在 SingleChildScrollView 中，当您向上滚动时，所有三个容器（RED、GREEN 和 ListView）都将向上滚动，当 ListView 到达顶部（欢迎容器下方）时，它的滚动将开始。

或者，您可以使用 ListView 小部件并将 physics 属性设置为 NeverScrollableScrollPhysics 以防止 ListView 滚动。

Expanded(
    child: ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        itemCount: mydata.length,
        itemBuilder: (context,index){
            return ListTile(
                title: Text(mydata[index]),
                leading: CircleAvatar(),
            );
        }
    )
)

这种方法将允许父 Scrollview 向上滚动，当 ListView 到达顶部时，将看到 Welcome 容器。