Flutter中实现DraggableScrollableSheet顶部子部件固定

要实现Sheet内顶部部件固定不随滚动移动，核心是将固定部件与滚动列表分离布局，不要把它们放在同一个可滚动组件里。具体实现步骤如下：

• 把DraggableScrollableSheet的child改为Column布局
• 在Column顶部放置需要固定的ListHandlerView和分类横向列表
• 用Expanded包裹下方的滚动列表（如ListView/GridView），让它占据剩余空间
• 给滚动列表设置ClampingScrollPhysics，避免和DraggableScrollableSheet的拖动交互冲突

示例代码结构：

DraggableScrollableSheet(
  expand: false,
  minChildSize: 0.6,
  maxChildSize: 1.0,
  builder: (context, scrollController) {
    return Column(
      children: [
        // 固定在顶部的部件：ListHandlerView + 分类横向列表
        const ListHandlerView(),
        SizedBox(
          height: 60,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 10,
            itemBuilder: (context, index) => Container(
              margin: const EdgeInsets.symmetric(horizontal: 8),
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(20),
              ),
              child: Text('分类 $index'),
            ),
          ),
        ),
        // 可滚动的列表区域
        Expanded(
          child: ListView.builder(
            physics: const ClampingScrollPhysics(),
            itemCount: 50,
            itemBuilder: (context, index) => ListTile(
              title: Text('列表项 $index'),
            ),
          ),
        ),
      ],
    );
  },
)

关键注意点 #

• 不要将固定部件放入滚动列表的头部或itemBuilder中，DraggableScrollableSheet的滚动会带动整个内容移动，只有分离布局才能实现真正固定
• 若保留Sheet的拖动缩放功能，必须设置滚动列表的physics为ClampingScrollPhysics，避免嵌套滚动冲突
• 分类横向列表本身的横向滚动不受影响，直接用ListView(scrollDirection: Axis.horizontal)即可

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