Flutter 布局障碍

Question

我是 Flutter 的新手 - 现在已经在我的应用程序上工作了几个月，并且在某些领域取得了很好的进展，但在其他领域却没有。我无法找出布置我的一系列屏幕的“正确方法”，所有这些屏幕在某些方面都有些相似。

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

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

Body
  SegmentedControl
  IndexStack
    Child 1
    Child N

我的问题是我想要/需要堆栈的所有子项来“填充主体的剩余区域”。因此，如果我可以在这里编一些数字，例如:设备高 600 像素，appbar 占 40，分段控件占 60，每个堆栈子项留出 500 像素。但在实践中，我似乎无法推断出我 body 的“剩余内容高度”。我希望(并且认为)有某种类型的布局小部件或容器小部件可以“自动调整所有剩余空间的大小”，但到目前为止还没有找到它。我尝试了许多不同小部件的多种组合，但似乎没有一个能解决问题。这是我的布局代码的浓缩 block :

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 就无法绘制，即我会收到错误。挑战在于让堆栈子项占用尽可能多的水平和垂直空间，并且在内容超出布局高度的情况下让它们的内容“可滚动”。我会尝试任何人的建议...我确信有办法做到这一点。

谢谢!

Answer 1

选项 1:

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

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