Flutter中Stack嵌套多ListView的手势事件分离问题

在Flutter应用里，用Stack组件嵌套两个ListView时，目前只有顶部的ListView能处理手势/指针事件。想问问：当底部ListView在视口中可见（顶部ListView没占满屏幕，比如附图里的蓝色区域对应的列表）时，能不能和底部ListView进行交互（比如滚动操作）？

示例代码 #

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const CustomStackApp());
}

class CustomStackApp extends StatelessWidget {
  const CustomStackApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CustomStackHome(),
    );
  }
}

class CustomStackHome extends StatefulWidget {
  final StackBaseListView stackBaseListView = const StackBaseListView();
  const CustomStackHome({super.key});

  @override
  State<CustomStackHome> createState() => _CustomStackHomeState();
}

class _CustomStackHomeState extends State<CustomStackHome> {
  bool toggle = false;

  void toggleFun() {
    setState(() {
      toggle = toggle ? false : true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Toggle"),
        actions: [
          FloatingActionButton(
            onPressed: toggleFun,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ],
      ),
      body: Stack(
        children: [
          widget.stackBaseListView,
          toggle
              ? ListView.builder(
                  itemCount: 10,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      color: Colors.white,
                      child: ListTile(
                        title: Text('Item $index'),
                      ),
                    );
                  },
                )
              : Container()
        ],
      ),
    );
  }
}

class StackBaseListView extends StatelessWidget {
  const StackBaseListView({super.key});

  Color getRandomColor() {
    Random random = Random();
    return Color.fromARGB(
        255, random.nextInt(256), random.nextInt(256), random.nextInt(256));
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 250,
            padding: const EdgeInsets.only(bottom: 10),
            color: getRandomColor(),
          );
        });
  }
}

答案 #

默认情况下没法和底部ListView交互。原因是Stack的子组件按堆叠顺序渲染，后面的组件会覆盖在前面组件上方。哪怕顶部ListView没占满屏幕，它的触摸响应区域是整个可滚动范围，会拦截落在该区域内的所有手势事件，底部ListView根本接收不到任何指针事件。

如果要让底部ListView在可见区域能被交互，可以试试这几种方法：

• 用PointerInterceptor透传手势（需先安装依赖：flutter pub add pointer_interceptor）
  让顶部列表的空白区域把手势透传给底层组件：

  import 'package:pointer_interceptor/pointer_interceptor.dart';
  
  // 包裹顶部ListView
  PointerInterceptor(
    intercepting: false,
    child: ListView.builder(...),
  )
  

• 用IgnorePointer忽略顶部手势
  如果顶部ListView不需要处理任何手势，直接用该组件包裹，让所有手势落到底部：

  IgnorePointer(
    ignoring: true,
    child: ListView.builder(...),
  )
  

• 限制顶部ListView的尺寸
  给顶部ListView套个SizedBox，让它只占实际需要的高度，未被覆盖区域的手势自然会被底部ListView接收：

  SizedBox(
    height: 300, // 按需设置高度
    child: ListView.builder(...),
  )
  

• 自定义手势拦截区域
  只让顶部ListView的内容区域拦截手势，空白区域不处理。可以给列表item单独加手势识别，或者用GestureDetector包裹需要响应的部分。

内容的提问来源于stack exchange，提问作者Csisanyi