Flutter Web实现顶部固定导航+下方可滚动区域的报错问题

你的问题出在外层用了Column，而Column本身不会限制子组件的高度，导致里面的SingleChildScrollView没有明确的可用空间约束——它会试图撑满无限高度，这就触发了RenderFlex的报错。

要实现顶部导航固定、下方内容滚动，只需要给SingleChildScrollView套一层Expanded，让它占据导航栏之外的剩余屏幕空间，这样ScrollView就有了确定的高度范围，自然能正常滚动。

修改后的代码如下：

body: Column(
  children: [
    // 固定的导航栏部分
    Material(
      elevation: 10,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const SizedBox(width: 10),
          Row(
            children: [
              const SizedBox(width: 10),
              Image.asset('assets/images/logo.png', width: 50),
              const SizedBox(width: 10),
              const Text(
                "Brand",
                style: TextStyle(
                  fontSize: 26,
                  color: Colors.blue,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          const SizedBox(width: 300),
          const Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text("Articles", style: TextStyle(fontSize: 18)),
                Text("Messages", style: TextStyle(fontSize: 18)),
                Text("Books", style: TextStyle(fontSize: 18)),
                Text("About", style: TextStyle(fontSize: 18)),
                Text("Give", style: TextStyle(fontSize: 18)),
              ],
            ),
          ),
          const SizedBox(width: 300),
          const Icon(Icons.search),
          const SizedBox(width: 10)
        ],
      ),
    ),
    // 可滚动的内容部分，用Expanded包裹
    Expanded(
      child: SingleChildScrollView(
        child: Column(
          children: [
            Image.asset('assets/images/logo.png', width: 200),
            Image.asset('assets/images/logo.png', width: 200),
            Image.asset('assets/images/logo.png', width: 200),
            Image.asset('assets/images/logo.png', width: 200),
            Image.asset('assets/images/logo.png', width: 200),
            Image.asset('assets/images/logo.png', width: 200),
            Image.asset('assets/images/logo.png', width: 200),
            Image.asset('assets/images/logo.png', width: 200),
          ],
        ),
      ),
    ),
  ],
),

补充说明：这个写法会让导航栏始终固定在页面顶部，下方的滚动区域只会占用导航栏之外的屏幕空间，滚动内容时不会影响导航栏的位置。

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