Flutter中DraggableScrollableSheet嵌套滚动交互问题排查

当前UI组成 #

• 具备滚动行为的底部面板DraggableScrollableSheet
• 用于实现吸顶效果的顶部UI
• 展示内容的元素列表

预期交互行为 #

• 整个面板可上下拖拽至最大/最小展开程度
• 处于最小展开状态时，拖拽面板（含子滚动视图）可向上拖动整个面板
• 处于最大展开状态时，按住顶部UI（标题文本+拖拽手柄）向下拖动，面板应收起
• 处于最大展开状态时，按住子滚动视图拖动，应先滚动完所有内容，再拖动整个面板

现存问题 #

• 使用SingleChildScrollView或ListView包裹后，整个面板可滚动，但嵌套列表无法继承滚动特性
• 使用CustomScrollView可实现继承滚动特性，但当面板处于最大展开状态且内容已上滑时，向下拖动顶部UI会先滚动所有元素再拖动面板，体验不佳

解决方案 #

核心思路是区分顶部UI与子列表的拖拽行为：给顶部UI添加独立的手势监听，直接控制面板的收起；子列表则保持原有滚动逻辑，滚动到边界后再触发面板拖拽。

修改后的完整代码 #

import 'package:flutter/material.dart';

class DraggableSheetExample extends StatefulWidget {
  @override
  _DraggableSheetExampleState createState() => _DraggableSheetExampleState();
}

class _DraggableSheetExampleState extends State<DraggableSheetExample> {
  final DraggableScrollableController _sheetController = DraggableScrollableController();
  bool _isMaxExpanded = false;

  @override
  void initState() {
    super.initState();
    _sheetController.addListener(() {
      setState(() {
        _isMaxExpanded = _sheetController.size == _sheetController.maxSize;
      });
    });
  }

  @override
  void dispose() {
    _sheetController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 主内容区
          Positioned.fill(
            child: Container(
              color: Colors.blueGrey[100],
              child: const Center(child: Text("主内容区")),
            ),
          ),

          // 拖拽面板
          Align(
            alignment: Alignment.bottomCenter,
            child: DraggableScrollableSheet(
              controller: _sheetController,
              initialChildSize: 0.3,
              minChildSize: 0.3,
              maxChildSize: 0.9,
              builder: (context, scrollController) {
                return Container(
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
                  ),
                  child: Column(
                    children: [
                      // 带拖拽手势的吸顶头部
                      GestureDetector(
                        onPanUpdate: (details) {
                          if (_isMaxExpanded) {
                            double delta = details.delta.dy / MediaQuery.of(context).size.height;
                            double newSize = _sheetController.size + delta;
                            _sheetController.jumpTo(
                              newSize.clamp(_sheetController.minSize, _sheetController.maxSize)
                            );
                          }
                        },
                        child: Container(
                          padding: const EdgeInsets.all(16),
                          child: Column(
                            children: [
                              Container(
                                width: 40,
                                height: 4,
                                decoration: BoxDecoration(
                                  color: Colors.grey,
                                  borderRadius: BorderRadius.circular(2),
                                ),
                              ),
                              const SizedBox(height: 8),
                              const Text(
                                "附近充电站",
                                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                              ),
                            ],
                          ),
                        ),
                      ),

                      // 滚动列表
                      Expanded(
                        child: ListView.builder(
                          controller: scrollController,
                          physics: const BouncingScrollPhysics(),
                          itemCount: 20,
                          itemBuilder: (context, index) {
                            return ListTile(
                              leading: const Icon(Icons.ev_station),
                              title: Text("充电站 ${index+1}"),
                              subtitle: const Text("详细地址信息"),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

关键优化点说明 #

1. 头部手势独立控制：给顶部UI包裹GestureDetector，监听onPanUpdate事件，当面板处于最大展开状态时，直接通过_sheetController调整面板大小，跳过列表滚动逻辑。
2. 面板状态监听：通过DraggableScrollableController的监听，实时判断面板是否处于最大展开状态，确保只有在该状态下头部拖拽才会触发面板收起。
3. 保持列表原有逻辑：子列表继续使用面板提供的scrollController，确保滚动到顶部后继续拖动能带动面板收起，符合预期交互。

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