Flutter Row()有两个ListView，如何让一个ListView占用最小空间？

Question

我正在尝试进行三列布局，并希望中间的列占用最大的空间，而其他两列的内容占用最小的空间。

我发现实现这种情况的唯一方法是将左/右行项目包装在

SizedBox(width: someFixedValue)

中，我想避免这种情况，因为大小无法响应文本大小更改等。

我已经尝试了所有我能想到的 Expanded、Flexible、Wrap、shrinkWrap: true 等变体...我尝试过的都不起作用。 [要么让右侧列占用比所需更多的空间，要么导致视口被给予无限空间的布局错误。]

当内容是像 ListView 这样的可扩展内容时，有什么方法可以在 3 项行上实现这种最小-最大-最小布局效果吗？ 这是我尝试过的一个示例，但它

不起作用。这导致两个 ListView 占用相等的空间。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [

              // Left "panel" shunk to min size for content:
              Text('Text 1'),

              // Center panel, I want expanded to all available space
              Expanded(
                child: ListView(
                  shrinkWrap: true,
                  children: [
                    Text('Item 1'),
                    Text('Item 2'),
                    Text('Item 3'),
                  ],
                ),
              ),

              // Right "panel", I want shrunk to min size for content
              Flexible(
                child: ListView(
                  shrinkWrap: true,
                  children: [
                    Text('Item A'),
                    Text('Item B'),
                    Text('Item C'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

您可以在下面的代码中尝试一下，这是我建议您这样做的：

Answer 1

如果不需要使用listview，我建议使用column，以更好地控制children之间的空格。

删除右侧面板的柔性并使用列而不是列表视图。

您可以尝试左侧面板文本换行与列。

下面是我认为可以实现您想要的功能的代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Left "panel" shrunk to minimum size for content
               Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [Text('Text 1')],
                ),
              
              // Center panel expands to all available space
              Expanded(
                child: ListView(
                  children: [
                    Text('Item 1'),
                    Text('Item 2'),
                    Text('Item 3'),
                  ],
                ),
              ),
              // Right "panel" shrunk to minimum size for content
               Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text('Item A'),
                    Text('Item B'),
                    Text('Item C'),
                  ],
               ),             
            ],
          ),
        ),
      ),
    );
  }
}