Flutter 布局障碍

Question

我对 Flutter 比较陌生 - 现在我的应用程序已经开发了几个月，并且在某些领域取得了很好的进展，但在其他领域却没有。我无法弄清楚 'right way' 来布置我的一系列屏幕，所有这些屏幕在某些方面都有些相似。

简而言之，除了应用栏之外，脚手架还将包含一个容器，其中我有一个 Cupertino Segmented Control。分段控件用于在 'below' 它的 IndexedStack 控件之间切换。

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

Body
  SegmentedControl
  IndexStack
    Child 1
    Child N

我的问题是我want/need所有的children栈到'fill the remaining area'的body。因此，如果我可以在这里编一些数字，例如：设备高 600 像素，应用栏占 40，分段控件占 60，每个堆栈留出 500 像素 child。但在实践中，我似乎无法推断出我的 Body 的 'remaining content height'。我希望（并且认为）有某种类型的布局小部件或容器小部件 'auto sizes to all remaining space' 但到目前为止还没有找到它。我尝试了许多不同小部件的组合，none 似乎可以解决问题。这是我的布局代码的浓缩块：

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"),
          ],
        ),
      ),
     ],            
   ), 
 ),

我只显示了一个 child 索引堆栈。实际上我可以有几个。如果我不给容纳 ListView 的容器一个有限的高度（和某种宽度），RenderBox 就无法绘制，即我会收到错误。挑战在于让堆栈 children 占据尽可能多的水平和垂直 space，并且在内容超出布局的情况下，它们的内容 'scrollable'高度。我会尝试任何人的建议...我确信有办法做到这一点。

谢谢！

Answer 1

选项 1：

将 Container 小部件替换为 Expanded，它将在可用的 space 上展开，如下所示

   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计算所需的高度。不确定这是否有效，或者这是否是一个好习惯。

Flutter 布局障碍

Flutter Layout Roadblock

flutter

flutter-layout