Flutter 布局障碍

Question

我对 Flutter 比较陌生 - 几个月来一直在开发我的应用程序，并且在某些领域取得了不错的进展，但在其他方面却没有。我很难找出布局我的一系列屏幕的“正确方法”，所有这些在某些方面都有些相似。

简而言之，除了应用栏之外，脚手架将包含一个容器，其中我有一个 Cupertino 分段控件。分段控件用于在其“下方”的 IndexedStack 控件之间切换。

堆栈的每个子级都可以有不同的内容 - 有时是一个列表视图，有时是一个包含许多文本输入、开关等的表单。因此结构在逻辑上可能如下所示：

Body
  SegmentedControl
  IndexStack
    Child 1
    Child N

我的问题是我想要/需要堆栈的所有子级来“填充身体的剩余区域”。所以，如果我可以在这里弥补一些数字，例如：设备是 600 像素高，应用栏需要 40，分段控制需要 60，每个堆栈子级留出 500 像素。但在实践中，我似乎无法推断出我身体的“剩余内容高度”。我希望（并认为）有某种类型的布局小部件或容器小部件“自动调整所有剩余空间的大小”，但到目前为止还没有找到它。我已经尝试了许多不同小部件的许多组合，但似乎没有一个能奏效。这是我的布局代码的浓缩块：

body: Container(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(top: 16.0, bottom: 16.0),
        child: CupertinoSegmentedControl(
          children: tabOptions,
          onValueChanged: tabChanged,
          groupValue: curTabIndex,
        ),
      ),
      Container(
        height: 400.0, //needs to be 'all the rest' instead of a constant
        width: double.infinity,
        child: ListView(
          children: <Widget>[
            Text(“Example Text - would really be list tiles"),
            Text(“displaying results of database query"),
          ],
        ),
      ),
     ],            
   ), 
 ),

我只显示了索引堆栈的一个孩子。在实践中，我可以有几个。如果我不给持有 ListView 的容器一个有限的高度（和某种宽度），则 RenderBox 无法绘制，即我得到错误。挑战在于让堆栈子项占用尽可能多的水平和垂直空间，并且在内容超出布局高度的情况下使其内容“可滚动”。我会尝试任何人建议的任何东西...我确信有办法做到这一点。

谢谢！

Answer 1

选项 1：

用 Expanded 替换 Container 小部件，这将在可用空间上展开，如下所示

   Expanded(
   //Container(
    //height: 400.0, //needs to be 'all the rest' instead of a constant
   // width: double.infinity,
    child: ListView(

扩展文档：https://docs.flutter.io/flutter/widgets/Expanded-class.html

选项 2：

使用 MediaQuery.of(context).size.height 计算所需的高度。不确定这是否可行，或者即使这是一个好习惯。