Flutter中Scaffold的body为何无法直接使用Row()？

为什么直接用Row作为Scaffold body会空白？ #

Row是水平方向的弹性布局组件，它需要父组件提供明确的宽度约束才能正常渲染。Scaffold的body会向子组件提供无限的水平可用空间，当Row直接作为body时，没有约束限制它的宽度，且如果Row的子组件也没有设置固定宽度或通过Expanded/Flexible来分配空间，Row无法确定自身的布局尺寸，最终导致界面空白。

实现音乐播放器风格布局的代码示例 #

要实现包含两行的布局（第一行侧边菜单+内容区，第二行播放控制栏），可以用Column作为Scaffold的body，在Column中嵌套Row来实现第一行的水平布局：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            // 第一行：侧边菜单 + 内容区
            Expanded(
              child: Row(
                children: [
                  // 左侧菜单，固定宽度
                  Container(
                    width: 200,
                    color: Colors.grey[200],
                    child: const LeftMenu(),
                  ),
                  // 内容区，占满剩余水平空间
                  Expanded(
                    child: Container(
                      color: Colors.white,
                      child: const Center(child: Text('播放内容展示区')),
                    ),
                  ),
                ],
              ),
            ),
            // 第二行：底部播放控制栏
            Container(
              height: 80,
              color: Colors.blueGrey[900],
              child: const Center(child: Text('播放控制栏')),
            ),
          ],
        ),
      ),
    );
  }
}

// 示例左侧菜单组件
class LeftMenu extends StatelessWidget {
  const LeftMenu({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        ListTile(title: Text('我的收藏')),
        ListTile(title: Text('最近播放')),
        ListTile(title: Text('推荐歌单')),
      ],
    );
  }
}

关键要点： #

• 用Column作为最外层布局，实现两行垂直排列
• 第一行的Row被Expanded包裹，确保它占满Column的剩余垂直空间（避免被底部栏挤压）
• 左侧菜单设置固定宽度，内容区用Expanded包裹，让它自动占满Row的剩余水平空间
• 底部播放控制栏设置固定高度，保证它始终显示在界面底部

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