使用Sliver实现Flutter页面可滚动失败，求排查解决

你的代码无法滚动的核心原因是：当前所有Sliver组件的总高度没有超出屏幕可用高度，CustomScrollView只有在内容总高度超过视图高度时才会触发滚动行为。原代码中SliverToBoxAdapter里的文本内容过短，不足以触发滚动。

下面提供两种可行的解决方案：

方案1：延长文本内容并添加内边距 #

直接增加文本长度，同时给文本添加内边距让内容更容易超出屏幕：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: [
        SliverAppBar(
          floating: true,
          snap: true,
          expandedHeight: 300,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.asset(
              "assets/images/food6.jpg",
              width: double.maxFinite,
              fit: BoxFit.cover,
            ),
          ),
        ),
        const SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            child: Text("Chinese fruit food details. Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details. Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details. Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details. Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details. Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details."),
          ),
        ),
      ],
    ),
  );
}

方案2：使用SliverList构建可滚动列表 #

如果你的内容是动态或需要重复展示的，推荐用SliverList替代SliverToBoxAdapter，它天然支持长列表滚动：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: [
        SliverAppBar(
          floating: true,
          snap: true,
          expandedHeight: 300,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.asset(
              "assets/images/food6.jpg",
              width: double.maxFinite,
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Text("Chinese fruit food details. Chinese fruit food details Chinese fruit food details Chinese fruit food details Chinese fruit food details"),
            ),
            childCount: 10, // 设置列表项数量，确保内容超出屏幕高度
          ),
        ),
      ],
    ),
  );
}

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