Question

我知道这是一个常见问题，但是我找不到解决我问题的确切方法。我创建了一个在底部包含TextField的小部件的Column视图，并且当键盘弹出时，textField被隐藏了。

最初，视图溢出，因此，我设置了resizeToAvoidBottomPadding：false，以解决该问题。但是，现在文本字段已被完全隐藏。

我在代码中使用了Spacer和flex，因此不想转移到ListView。

如何解决此问题？

Answer 1

您可以使用SingleChildScrollView包装小部件。例如：

latLng

也：查看此link是否有帮助。

Answer 2

您的主要问题归结为想要在需要位于ScrollView中的Column中使用Flex。您希望您的专栏在不显示键盘时填充整个页面，在显示键盘时删除所需的空白空间，并在删除所有空白空间后仍无法容纳其余屏幕的情况下使其可滚动

为此，您需要使用此页面上的最后一个示例：https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: viewportConstraints.maxHeight,
          ),
          child: IntrinsicHeight(
            child: Column(
              children: <Widget>[
                Container(
                  // A fixed-height child.
                  color: const Color(0xff808000), // Yellow
                  height: 120.0,
                ),
                Expanded(
                  // A flexible child that will grow to fit the viewport but
                  // still be at least as big as necessary to fit its contents.
                  child: Container(
                    color: const Color(0xff800000), // Red
                    height: 120.0,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    },
  );
}

您需要LayoutBuilder，因为它提供了viewportConstraints，它为您提供了孩子可以使用的最大高度而不会溢出。显示/隐藏键盘时，它也会自动重建，因为此值将更改。

一旦“列”不再适合屏幕，您需要SingleChildScrollView能够滚动。

您需要IntrinsicHeight，以便Column完全采用其内容所需的高度。没有这个，由于ScrollView，Column将占据无限的高度，而Spacers将抛出异常。

您需要ConstrainedBox设置Column必须使用的最小高度-这是LayoutBuilder中上面提到的值。这将强制Column至少与屏幕允许的大小一样-如果没有InstrinsicHeight小部件，则Spacers将没有此效果，因为Column会缩小到其最小高度。

由于实现此布局所需的用于不同目的的小部件数量众多，这可能有点难以理解，但是好消息是，您只需要复制粘贴并将其更改为Column的内容即可。

当键盘阻塞文本框时如何显示它？

2 个答案: