Flutter：如何在Column内嵌Row中实现固定宽、占满可用高度的ListView

我想要构建如图所示的组件布局，但写不出正确代码。我只会用Container和SizedBox指定子组件尺寸，但把ListView作为子组件时，设置高度为无穷大根本无效。我搞不懂为什么Row不能把设置了无穷大高度的SizedBox约束成实际可用高度，屏幕难道不会约束它的内容吗？

更新：附上我的代码，最终解决方案部分基于@bakboem的回答。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            TopBar(),
            Row(
              children: [
                myListView(),
                Expanded(
                  child: Container(
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: double.infinity,
      child: Expanded(
        child: ListView(
          children: [
            someListItem(),
            someListItem(),
          ],
        ),
      ),
    );
  }
}

问题分析与解决方案 #

核心问题是Flutter的约束传递逻辑：Column会给子组件传递「最大高度无限」的约束，Row在没有明确高度限制时，也会把这个无限约束传递给子组件。但ListView需要明确的高度约束才能正常工作，直接给SizedBox设height: double.infinity无效，因为父组件并没有提供明确的高度上限。

修改后的完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            const TopBar(),
            // 新增：让Row占满Column剩余的可用空间，获取明确高度约束
            Expanded(
              child: Row(
                children: [
                  const myListView(),
                  Expanded(
                    child: Container(
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      // 移除无效的无限高度设置，高度由父组件约束自动填充
      child: ListView(
        children: const [
          someListItem(),
          someListItem(),
        ],
      ),
    );
  }
}

// 补充示例组件（原代码未定义）
class TopBar extends StatelessWidget {
  const TopBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      color: Colors.blue,
      child: const Center(child: Text("顶部栏")),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      color: Colors.grey[300],
      child: const Center(child: Text("列表项")),
    );
  }
}

关键修改点说明

1. 给Row外层套Expanded：让Row占满Column剩余的屏幕空间，这样Row就能获得明确的高度约束，不再是无限值。
2. 移除无效设置：删除SizedBox的height: double.infinity，同时去掉嵌套在SizedBox里的Expanded（Expanded仅能在Column/Row/Flex的直接子组件中生效，嵌套在其他容器里无意义）。
3. 自动继承高度：SizedBox只指定宽度，高度会自动继承Row的约束，ListView就能在这个明确高度内正常滚动。

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