Flutter DraggableScrollableSheet问题：点击头部组件无法展开

问题核心在于DraggableScrollableSheet默认仅将拖拽/点击展开的交互绑定到ScrollController关联的可滚动组件（即你的ListView），头部的拖拽柄和标题栏默认不会响应这类操作。以下是两种解决方式：

方式一：使用Flutter 3.10+新增的dragHandle参数（推荐） #

Flutter 3.10及以上版本为DraggableScrollableSheet添加了dragHandle参数，可直接指定拖拽交互区域，无需额外手势处理：

1. 移除createDragHandle中的IgnorePointer（它会屏蔽所有触摸事件）：

Widget createDragHandle() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        margin: const EdgeInsets.only(top: 16, bottom: 8),
        height: 8,
        width: 80,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.grey,
        ),
      ),
    ],
  );
}

2. 修改DraggableScrollableSheet，添加dragHandle参数，并给标题栏添加点击展开逻辑：

return DraggableScrollableSheet(
  initialChildSize: 0.2,
  minChildSize: 0.2,
  maxChildSize: 1,
  snapSizes: const [.4, 1],
  snap: true,
  // 指定拖拽柄，支持拖拽/点击展开
  dragHandle: DragHandle(child: createDragHandle()),
  builder: (BuildContext context, ScrollController scrollController) {
    return SafeArea(
      child: Container(
        decoration: createSheedBoxDecoration(),
        child: Column(
          children: [
            createDragHandle(),
            // 给标题栏添加点击展开事件
            GestureDetector(
              onTap: () {
                DraggableScrollableActuator.animateTo(
                  context,
                  initialChildSize: 0.4, // 可改为1直接展开到最大尺寸
                  snap: true,
                );
              },
              child: createListItemTitleWidget(),
            ),
            Expanded(
              child: linesListViewWidget(busLines, scrollController),
            ),
          ],
        ),
      ),
    );
  },
);

方式二：兼容低版本Flutter（手动添加手势处理） #

如果你的Flutter版本低于3.10，可通过GestureDetector手动给头部组件添加交互逻辑：

1. 修改createDragHandle，添加点击和拖拽支持：

Widget createDragHandle() {
  return GestureDetector(
    onTap: () {
      DraggableScrollableActuator.animateTo(
        context,
        initialChildSize: 0.4,
        snap: true,
      );
    },
    // 可选：添加拖拽手势支持
    onVerticalDragUpdate: (details) {
      scrollController.jumpTo(scrollController.offset - details.delta.dy);
    },
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          margin: const EdgeInsets.only(top: 16, bottom: 8),
          height: 8,
          width: 80,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.grey,
          ),
        ),
      ],
    ),
  );
}

2. 给标题栏添加点击展开逻辑：

Widget createListItemTitleWidget() {
  return GestureDetector(
    onTap: () {
      DraggableScrollableActuator.animateTo(
        context,
        initialChildSize: 0.4,
        snap: true,
      );
    },
    child: Padding(
      padding: const EdgeInsets.only(left: 16, top: 16, bottom: 16),
      child: Row(
        children: [
          const Icon(Icons.directions, size: 24),
          const SizedBox(width: 8.0),
          Text(
            "Header",
            style: Theme.of(context).textTheme.bodyLarge,
            overflow: TextOverflow.ellipsis,
          )
        ],
      ),
    ),
  );
}

3. 确保DraggableScrollableSheet的builder中正常使用这些组件即可。

注意：使用DraggableScrollableActuator需要确保当前上下文在DraggableScrollableSheet的子树中，否则需要通过GlobalKey获取上下文。

内容的提问来源于stack exchange，提问作者Dživo Jelić