flutter - SingleChildScrollView with Column，底部需要按钮

Question

我正在尝试创建一个其中包含一列的 SingleChildScrollView，我希望在屏幕的最底部有一个按钮。为此，我尝试使用带有 SingleChildScrollView 和 FlatButton 的堆栈作为子级。我最终得到的是:

我无法让按钮粘在底部，即使我已经定位了按钮并将其与底部对齐。绿色只是为了显示列的高度，按钮贴在列的底部。 Stack、SingleChildScrollView、Column 和 FlatButton 只占用它们显示所需的空间。我需要将该按钮粘贴到屏幕底部。

这是我用来创建它的代码。我错过了什么？

return Scaffold(
  appBar: AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text(widget.title),
  ),
  body: Container(
    width: double.infinity,
    color: Colors.red,
    child: Stack(
      children: <Widget>[
        Container(
          color: Colors.green,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Protein',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Fat',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Fiber',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Moisture',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
                Container(
                  child: TextField(
                    decoration: InputDecoration(
                      labelText: 'Ash',
                    ),
                  ),
                  margin: EdgeInsets.only(left: 20, right: 20),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Align(
            alignment: Alignment.bottomCenter,
            child: ButtonTheme(
              minWidth: double.infinity,
              height: 50,
              child: FlatButton(
                color: Colors.blueAccent.shade400,
                onPressed: () {},
                child: Text(
                  'Calculate Carbs',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        )
      ],
    ),
  ),
);

编辑:下面给出的两种方法都可以扩展 Stack 以填满整个屏幕。我添加了额外的 TextField 小部件来填满屏幕，然后单击底部的小部件以确保在键盘打开时底部小部件可见，并注意到按钮覆盖了底部字段。这就像 ScrollView 向上滚动了正确的量，而忽略了那里有一个按钮。

在下图中，我点击了 End Field 3 小部件。按钮遮住了它，这样我就看不到我在该字段中输入的内容。

Answer 1

使用CustomScrollView:

CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: <Widget>[
          const Text('Header'),
          Expanded(child: Container(color: Colors.red)),
          const Text('Footer'),
        ],
      ),
    ),
  ],
)

参见:https://stackoverflow.com/a/62097942/5164462