Flutter中Row嵌套ListView实现最小-最大-最小三列布局方案

要实现左右列仅占用内容所需最小宽度、中间列占满剩余空间的三列布局，且左右列是ListView这类可滚动组件，核心是给左右组件添加宽度约束，确保它们不会无限制扩展，同时用Expanded让中间列占据剩余空间。

解决方案代码 #

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: Row(
          children: [
            // 左侧面板：IntrinsicWidth约束宽度为内容最小宽度
            IntrinsicWidth(
              child: ListView(
                shrinkWrap: true,
                children: const [
                  Text('Text 1'),
                  Text('Longer Left Text'),
                ],
              ),
            ),

            // 中间面板：Expanded占满所有剩余空间
            Expanded(
              child: ListView(
                shrinkWrap: true,
                children: const [
                  Text('Item 1'),
                  Text('Item 2'),
                  Text('Item 3'),
                  Text('Long Center Item That Wraps Automatically'),
                ],
              ),
            ),

            // 右侧面板：同样用IntrinsicWidth约束宽度
            IntrinsicWidth(
              child: ListView(
                shrinkWrap: true,
                children: const [
                  Text('Item A'),
                  Text('Longer Right Text Example'),
                  Text('Item C'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

1. IntrinsicWidth的作用：
   这个组件会强制子组件的宽度等于其固有内容宽度，也就是内容实际需要的最小宽度，完美适配文本大小变化、内容长度变化等场景，无需固定宽度。

2. 为什么之前的代码无效：

   • 直接用Flexible包裹ListView时，ListView在水平方向没有明确约束，会试图占据尽可能多的空间，导致右列超出所需宽度。
   • 未添加宽度约束时，Row的水平方向会出现"无界空间"错误，因为ListView默认不限制自身宽度。

3. 布局细节调整：

   • 移除了原代码中的Center，因为Center会让Row的宽度收缩为子内容总宽度，无法让中间Expanded占满屏幕剩余空间。如果需要垂直居中，可以给Row外层套Center，同时给Row添加width: double.infinity的约束（比如用SizedBox(width: double.infinity, child: Row(...))）。
   • 左右侧的复杂组件只要能正确计算固有宽度，IntrinsicWidth同样适用，无需修改组件内部逻辑。

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