如何给 Column 元素提供最小要求 space 并将 space 的其余部分提供给 flutter 中的其他元素

Question

假设我的 flutter 应用程序的列中有 2 个小部件（Widget_A 和 Widget_B）。 Widget_A 包含 SingleChildScrollView() 并且 Widget_B 包含一些固定高度元素上的 Column。我试图用下图来演示这个场景。

现在的问题是，我希望 Widget_B 尽可能地获取所需的 space，而 Widget_A 获取所有可用的 space。我尝试使用具有 flex 值的 Expanded() 小部件来执行此操作。但是，如果我基于更大的屏幕设备为 Widget_B 提供 flex，它会溢出到更小的屏幕设备，如 iPhone SE（因为 Widget_B 包含固定高度的元素）。当我尝试基于较小的屏幕设备为 Widget_B 提供 flex 时，它在 Widget_B.

下方留下一个大空白 space

我也尝试过用 SizedBox.expand() 包裹 Widget_A，用 SizedBox.shrink() 包裹 Widget_B。但它会抛出某种异常。我在下面附上异常的屏幕截图。

请指导我，在这种情况下我应该怎么做。非常感谢你。 :)

Answer 1

要获取最大可用 space，Column 或 Row 中的 child 小部件应包含在 Expanded. Expanded also have flex 参数中，以便您可以按比例分配几个你喜欢的小部件。

这是您所要求的示例代码。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
        child: Container(
            color: Colors.white,
            child: SingleChildScrollView(
                child: Container(
                  color: Colors.black26,
                  height: 1200,
                  child: Center(
                    child:  Text('Widget A SingleChildScrollView content'),
                  ),
                
                ),
            ),
          ),
        ),
        Column(
        children: const [
           SizedBox(
            height: 20,
            child:  Text('Widget B child 1'),
          ),
           SizedBox(
            height: 20,
            child:  Text('Widget B child 2'),
          ),
        ]),
      ],
    );
  }
}

除此之外，您必须确保 SingleChildScrollView 的 child 没有不受限制的高度。

如何给 Column 元素提供最小要求 space 并将 space 的其余部分提供给 flutter 中的其他元素

How to give minimum required space to Column element and rest of the space to other element in flutter

user-interface

android

dart

flutter

flutter-layout