如何将小部件放置在SingleChildScrollView的底部？

Question

我需要使用SingleChildScrollView才能使用keyboard_actions，以便可以在iOS的键盘上方放置一个“完成”按钮（此刻使用数字键盘）

在SingleChildScrollView将有一列作为一个孩子，然后一个按钮被放置在底部。我试着LayoutBuilder用来将高度提高到SingleChildScrollView。

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {
    return SingleChildScrollView(
        child: ConstrainedBox(
            constraints:
                BoxConstraints(minHeight: viewportConstraints.maxHeight),
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Column(),
                  // Spacer() ?
                  FlatButton()
                ])));
  });

我尝试将BoxConstraintswith与该maxHeight属性一起使用，但是最终当键盘出现时，该小部件不会消失。

旁注：脚手架同时具有resizeToAvoidBottomInset和resizeToAvoidBottomPadding设置为true（默认值）

Answer 1

我刚刚复制并粘贴了我找到的最佳解决方案，由 @Quentin 引用，由 @NikitaZhelonkin 在 Github 上 Flutter 第 18711 期中详细阐述。简直就是完美的解决方案！

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AppBar'),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
              child: ConstrainedBox(
                  constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
                  child: IntrinsicHeight(
                    child: Column(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Text('header'),
                          Expanded(
                            child: Container(
                              color: Colors.green,
                              child: Text('body'),
                            ),
                          ),
                          Text('footer'),
                        ]
                    ),
                  )
              )
          );
        })
    );
  }
}

Answer 2

所选择的答案并没有真正起作用，因为使用 SizedBox 将 Column 的最大大小限制为屏幕的高度，因此您不能在其中放置任意数量的小部件（否则它们会离开屏幕而没有可滚动）。

无论列中有多少小部件，此解决方案都将起作用：https : //github.com/flutter/flutter/issues/18711#issuecomment-505791677

重要说明：只有当列中的小部件具有固定高度时才有效（例如 TextInputField 没有固定高度）。如果它们的高度可变，则用固定高度的 Container 包裹它们。

Answer 3

问题SingleChildScrollView在于shrikwrap它是孩子。因此，要在两者之间使用自动尺寸小部件-我们需要使用它MediaQuery来获取屏幕高度并SizedBox展开- SingleChildScrollView。

这里的按钮将在屏幕底部。

工作代码：

double height = MediaQuery.of(context).size.height;

    SingleChildScrollView(
          child: SizedBox(
              height: height,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Text('Dummy'),
                        Text('Dummy'),
                        Text('Dummy'),
                      ],
                    ),
                    Spacer(),
                    FlatButton(
                      onPressed: () {},
                      child: Text('Demo'),
                    )
                  ])),
        )