Flutter中DraggableScrollableSheet拖拽失效及底部吸顶需求咨询

问题核心 #

当前实现的三个问题根源在于DraggableScrollableSheet的默认交互与布局逻辑不匹配需求：

• 头部拖拽无响应：因为头部未关联滚动控制器，默认拖拽触发区域是整个Sheet而非指定头部
• 头部无法吸顶：Column布局下头部与列表是线性排列，没有动态位置调整逻辑
• 初始头部在底部：需要额外布局层来实现头部的位置切换

修复代码及说明 #

以下是完整的实现代码，同时解决三个问题：

import 'package:flutter/material.dart';

class CustomDraggableSheet extends StatefulWidget {
  const CustomDraggableSheet({super.key});

  @override
  State<CustomDraggableSheet> createState() => _CustomDraggableSheetState();
}

class _CustomDraggableSheetState extends State<CustomDraggableSheet> {
  final List<String> list = List.generate(20, (index) => "Item $index");
  double _sheetExtent = 0.145;
  final double _minExtent = 0.145;
  final double _maxExtent = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景层（按需替换）
          Container(color: Colors.grey.shade200),
          DraggableScrollableSheet(
            minChildSize: _minExtent,
            initialChildSize: _minExtent,
            maxChildSize: _maxExtent,
            expand: false,
            onSizeChanged: (extent) => setState(() => _sheetExtent = extent),
            builder: (context, scrollController) => SafeArea(
              child: Column(
                children: [
                  // 全屏时显示固定头部
                  if (_sheetExtent >= _maxExtent - 0.05)
                    const DraggableHeaderComponent(),
                  Expanded(
                    child: ListView.separated(
                      itemCount: list.length,
                      controller: scrollController,
                      padding: EdgeInsets.only(
                        bottom: _sheetExtent == _minExtent ? 60 : 0,
                      ),
                      separatorBuilder: (_, __) => const Divider(),
                      itemBuilder: (_, __) => const Component(),
                    ),
                  ),
                ],
              ),
            ),
          ),
          // 初始在底部的可拖拽头部
          Positioned(
            bottom: _sheetExtent == _minExtent ? 0 : -100,
            left: 0,
            right: 0,
            child: GestureDetector(
              onVerticalDragUpdate: (details) {
                final newExtent = (_sheetExtent - details.delta.dy / MediaQuery.of(context).size.height)
                    .clamp(_minExtent, _maxExtent);
                scrollController.jumpTo(
                  scrollController.position.maxScrollExtent * (newExtent - _minExtent) / (_maxExtent - _minExtent)
                );
              },
              child: const DraggableHeaderComponent(),
            ),
          ),
        ],
      ),
    );
  }
}

// 替换为你的实际头部组件
class DraggableHeaderComponent extends StatelessWidget {
  const DraggableHeaderComponent({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      color: Colors.blue,
      alignment: Alignment.center,
      child: const Text("拖拽头部", style: TextStyle(color: Colors.white, fontSize: 16)),
    );
  }
}

// 替换为你的实际列表项组件
class Component extends StatelessWidget {
  const Component({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      color: Colors.white,
      alignment: Alignment.center,
      child: const Text("列表项"),
    );
  }
}

关键实现点 #

• 拖拽响应修复：给底部的头部添加GestureDetector，通过手势偏移计算Sheet的目标尺寸，调用scrollController.jumpTo触发Sheet展开
• 头部吸顶逻辑：通过onSizeChanged监听Sheet的展开程度，当接近全屏时显示Sheet内的固定头部，此时列表滚动时头部保持在顶部
• 底部初始布局：用Stack放置两个头部组件，初始时仅显示底部的头部，Sheet展开后隐藏底部头部，显示Sheet内的固定头部

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